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

Two ways to introduce svg icons in Vue

How to introduce svg icons in Vue Method 1 of int...

Detailed explanation of Vue's monitoring properties

Table of contents Vue monitor properties What is ...

MySQL data table partitioning strategy and advantages and disadvantages analysis

Table of contents Why do we need partitions? Part...

Detailed explanation of Linux less command examples

less file name View File less file name | grep -n...

How to configure nginx to limit the access frequency of the same IP

1. Add the following code to http{} in nginx.conf...

Solution to the garbled code problem in MySQL 5.x

MySQL is a commonly used open source database sof...

The impact of limit on query performance in MySQL

I. Introduction First, let me explain the version...

A brief discussion on creating cluster in nodejs

Table of contents cluster Cluster Details Events ...

How to import/save/load/delete images locally in Docker

1. Docker imports local images Sometimes we copy ...

Do you know all 24 methods of JavaScript loop traversal?

Table of contents Preface 1. Array traversal meth...

How to deploy your first application with Docker

In the previous article, you have installed Docke...

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

[ Linux installation of Tomcat8 ] Uninstall Tomca...

Some parameter descriptions of text input boxes in web design

<br />In general guestbooks, forums and othe...