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

Solution to MySQL connection exception and error 10061

MySQL is a relational database management system ...

How to start multiple MySQL instances in CentOS 7.0 (mysql-5.7.21)

Configuration Instructions Linux system: CentOS-7...

CSS to achieve text on the background image

Effect: <div class="imgs"> <!-...

Do not start CSS pseudo-class names with numbers

When newbies develop div+css, they need to name t...

Component design specifications for WeChat mini-program development

WeChat Mini Program Component Design Specificatio...

HTML web page creation tutorial Use iframe tags carefully

Using iframes can easily call pages from other we...

The best solution for implementing digital plus and minus buttons with pure CSS

Preface: For the implementation of digital additi...

Apache Calcite code for dialect conversion

definition Calcite can unify Sql by parsing Sql i...

Solution to slow response of Tomcat server

1. Analytical thinking 1. Eliminate the machine&#...

MySQL 5.7.21 Installer Installation Graphic Tutorial under Windows 10

Install MySQL and keep a note. I don’t know if it...

Basic introductory tutorial on MySQL partition tables

Preface In a recent project, we need to save a la...

Implementation of k8s deployment of docker container

Environment: (docker, k8s cluster), continue with...

Solution to changing the data storage location of the database in MySQL 5.7

As the data stored in the MySQL database graduall...

How to create, start, and stop a Docker container

1. A container is an independently running applic...