This configuration also applies to other gulp, Webpack type projects that need to be packaged into static files via Node.js and deployed to the server.

Scaffold create VUE project (for example)

Create a demo project.

vue init webpack demo01
Copy the code

Write the DockerFile configuration file

Complete dockerfile file

Put it in the root directory of the project.

Dockerfile

FROM node:8-slim
RUNapt-get update && apt-get install -y nginxWORKDIR /usr/src/app
COPY ["package.json"."package-lock.json*"."npm-shrinkwrap.json*".". /"]
RUN npm install
COPY.RUN npm run build
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
	&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
RUNcp -r dist/* /var/www/html \ && rm -rf /user/src/appCMD ["nginx"."-g"."daemon off;"]
Copy the code

Dockerfile file configuration details

Base mirrored Node, and install nginx.

FROM node:8-slim
RUNapt-get update && apt-get install -y nginxCopy the code

Create directory /usr/src/app in the image and go to the directory. Used to temporarily store project code.

WORKDIR /usr/src/app
Copy the code

Download node dependencies.

# copy three dependency related JSON files to "/usr/src/app"

COPY ["package.json"."package-lock.json*"."npm-shrinkwrap.json*".". /"]

# Download dependency
RUN npm install
Copy the code

Copy all project files to /usr/src/app. (Download dependencies first and then copy all files of the project to the image.)

COPY.Copy the code

Run the package command

RUN npm run build
Copy the code

Soft link nginx logging to standard output and standard error. This allows you to view nginx logs via docker logs.

RUN ln -sf /dev/stdout /var/log/nginx/access.log \
	&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
Copy the code

Move the packaged file to the Nginx HTML directory. And remove the project source file (no use, just the packaged static file).

RUNcp -r dist/* /var/www/html \ && rm -rf /user/src/appCopy the code

Configure the project startup command. -g ‘daemon off; ‘The configuration parameter will make nginx run in the foreground. If it runs in the background, the Docker container will exit.

CMD ["nginx"."-g"."daemon off;"]
Copy the code

The deployment of

Move the project to the deployed system (for example, Linux) and go to the project root directory.

Package the project as a Docker image. The image name is Demo and the version number is 1.0

Docker build-t Demo :1.0Copy the code

-t < image name >:< version number >

Create the container and run it. Nginx-proxy is used for proxy. Directly open < domain > to access.

docker run -d -p 80 -eVIRTUAL_HOST=< domain name > Demo :1.0You can open multiple containers. Nginx-proxy automatically configures load balancing
docker run -d -p 80 -eVIRTUAL_HOST=< domain name > Demo :1.0Copy the code

Vue historyPattern processing, API proxy (add-on)

Nginx needs to be configured. Configuration files can be placed in the project and mapped to the image, or in the host and mapped to the container. The latter is selected here for convenient operation and maintenance.

Create a new configuration sample file on the host machine

/root/conf/demo.conf

server {
    listen       80;
    server_name< name >.Interface proxy
    location /api {
        #... omit
    }
    
    # vue 'history' mode configuration
    location / {
        root /var/www/html;
  		try_files $uri $uri/ /index.html; }}Copy the code

Change startup command

docker run -d -p 80 -eVIRTUAL_HOST = < domain name > - v/root/conf: / etc/nginx/conf. D demo: 1.0Copy the code

-v < host path >:< container path >