Said in the previous
I searched a lot of tutorials of Docker vue project deployment on the Internet, many of which are about packing the NPM run build of THE VUE project locally and uploading it to our warehouse, then pulling our code to the server, obtaining dist file, and then mounting the file into the DockR container. In fact, this operation should be defective, we should also put the packaging operation into the docker image to operate.
Deployment steps
Create a new Dockerfile under the project root directory:
# resum Dockerfile
# specify node image dependencies for installation and packaging of the project
FROM node:10.16.0 AS builder
# set the working directory of the container to /app.
WORKDIR /app
COPY package.json /app/
RUN npm config set registry "https://registry.npm.taobao.org/" \
&& npm install
COPY . /app
RUN npm run build
# Specify nginx configuration project, --from= Builder means to extract the compilation result from the last build (from node: Alpine as Builder), i.e. to put the newly generated dist into nginx
FROM nginx
COPY --from=builder app/dist /usr/share/nginx/html/
COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf
Expose container port 80
EXPOSE 80
Copy the code
As you can see, here I’ve also put the packaging operation into Dokcerfile.
COPY --from=builder app/dist /usr/share/nginx/html/
Copy the code
This command is to place the dist file we generated in the image into the nginx Web directory in the container.
COPY --from=builder app/nginx.conf /etc/nginx/
Copy the code
This command overwrites the nginx configuration file by copying the nginx.conf file from our project directory to the nginx configuration file directory in the container. nginx.conf:
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
#gzip on;
gzip on;
gzip_min_length 5k;
gzip_buffers 4 16k;
# gzip_http_version 1.0;
gzip_comp_level 3;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
Set your resume items
server {
listen 80;
server_name www.xieyezi.com;
location / {
root /usr/share/nginx/html; # site directory
index index.html index.htm; # Add attributes.
}
location = /50x.html {
root/usr/share/nginx/html; }}}Copy the code
Go to your server (ubuntu 18.04 is mine) and create a Web directory under the root directory. Then go to that directory and use Git to pull our project code into it.
- Clone’s own projects:
git clone xxxx
; - In the root directory of the project, create a new text file:
.dockerignore
:
.git
node_modules
npm-debug.log
Copy the code
This file will exclude the files in the above three paths, telling Docker not to package these three into the image file. 3. Create an image
Docker image build-t [imageName]:1.0Copy the code
After making the image, we can run our image against the container:
docker run -p 8080:80 -d --name [containerName] [iamgeName]
Copy the code
Then enter the docker ps command on the console to see the container information we just started. Then enter the domain name to test, normal operation.