Try Docker+Nginx to deploy single page application method

Try Docker+Nginx to deploy single page application method

From development to deployment, do it yourself

When we develop a single-page application, after executing the build

npm run build

An index.html will be generated in the dist directory. How do you deploy this index.html to the server?

Directory Structure

  • dist/: static files after the front-end is built
  • docker/: configuration files required for the image

Configure Nginx

Let me talk about a few configurations. First, Gzip compresses resources to save bandwidth and increase browser loading speed.

Although Webpack already supports generating .gz compressed packages at build time, it can also be enabled through Nginx
gzip on;
gzip_disable "msie6";
# 0-9 levels, the higher the level, the smaller the compressed package, but the higher the server performance requirement gzip_comp_level 9;
gzip_min_length 100;
# Gzip does not support compressed images, we only need to compress front-end resources gzip_types text/css application/javascript;

Then there is the configuration of the service port, which reverse proxies the API to the backend service

server {
 listen 8080;
 server_name www.frontend.com;

 root /usr/share/nginx/html/;

 location / {
 index index.html index.htm;
 try_files $uri $uri/ /index.html;
 # Disable caching of HTML to ensure that the latest CSS and JS resources are referenced expires -1;
 }

 location /api/v1 {
 proxy_pass http://backend.com;
 }
}

The complete configuration looks like this

worker_processes 1;

events { worker_connections 1024; }

http {
 ##
 # Basic Settings
 ##

 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 keepalive_timeout 65;
 types_hash_max_size 2048;

 include /etc/nginx/mime.types;
 default_type application/octet-stream;

 ##
 # Logging Settings
 ##

 access_log /var/log/nginx/access.log;
 error_log /var/log/nginx/error.log;

 ##
 # Gzip Settings
 ##

 gzip on;
 gzip_disable "msie6";
 gzip_comp_level 9;
 gzip_min_length 100;
 gzip_types text/css application/javascript;

 server {
 listen 8080;
 server_name www.frontend.com;

 root /usr/share/nginx/html/;

 location / {
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
  expires -1;
 }

 location /api/v1 {
  proxy_pass http://backend.com;
 }
 }
}

Configure Docker

Here is a simple one. Based on the basic image, copy the nginx.conf and index.html we wrote into the image.

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf
COPY dist /usr/share/nginx/html

Writing a Makefile

After completing the above preparations, you can write commands to execute the image packaging.

First give the image a name and port number

APP_NAME = spa_nginx_docker
PORT = 8080

Packaging images through build

build:
 cp docker/Dockerfile .
 cp docker/nginx.conf .
 docker build -t $(APP_NAME) .
 rm Dockerfile
 rm nginx.conf

Start the image through deploy

deploy:
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

Finally, there is a stop to stop and clean up the image.

stop:
 docker stop $(APP_NAME)
 docker rm $(APP_NAME)
 docker rmi $(APP_NAME)

The complete configuration looks like this

APP_NAME = spa_nginx_docker
PORT = 8080

build:
 cp docker/Dockerfile .
 cp docker/nginx.conf .
 docker build -t $(APP_NAME) .
 rm Dockerfile
 rm nginx.conf

deploy:
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

stop:
 docker stop $(APP_NAME)
 docker rm $(APP_NAME)
 docker rmi $(APP_NAME)

The complete command looks like this:

# Static resource build npm run build

# Image packaging make build

# Stop and delete the old image (can be ignored for the first time)
make stop

# Image startup make deploy

Summarize

The current deployment method is relatively simple. The use of basic images and image repositories will be added later. Let's explore the way ahead first.

You may also be interested in:
  • Docker builds Nginx+PHP+MySQL environment and deploys WordPress practice
  • How to deploy nginx with Docker and modify the configuration file
  • Docker for Beginners and Detailed Steps for Deploying NGINX
  • Docker nginx example method to deploy multiple projects
  • Docker deployment nginx implementation process graphic and text detailed explanation
  • Docker deploys Nginx and configures reverse proxy
  • Docker Nginx container production and deployment implementation method
  • How to deploy Nginx on Docker

<<:  Nodejs error handling process record

>>:  Solution to the data asymmetry problem between MySQL and Elasticsearch

Recommend

MySQL 8.0.13 installation and configuration method graphic tutorial

This article shares the installation and configur...

How to install lua-nginx-module module in Nginx

ngx_lua_module is an nginx http module that embed...

Implementation example of Docker rocketmq deployment

Table of contents Preparation Deployment process ...

MySQL slow query pitfalls

Table of contents 1. Slow query configuration 1-1...

Native JS to implement sharing sidebar

This article shares a sharing sidebar implemented...

Server concurrency estimation formula and calculation method

Recently, I need to stress test the server again....

Best Practices Guide for MySQL Partitioned Tables

Preface: Partitioning is a table design pattern. ...

The main idea of ​​​​dynamically setting routing permissions in Vue

I have seen some dynamic routing settings on the ...

Summary of MySQL foreign key constraints and table relationships

Table of contents Foreign Key How to determine ta...

MySQL 8.0.17 installation and configuration method graphic tutorial

This article shares the installation and configur...

How to quickly deploy an Elasticsearch cluster using docker

This article will use Docker containers (orchestr...

Write a publish-subscribe model with JS

Table of contents 1. Scene introduction 2 Code Op...