一、简单的部署步骤
-
1、在项目的根目录下创建一个
Dockerfile
的文件FROM node:14 # 使用的目录 WORKDIR /app # 拷贝依赖包的文件 COPY package.json . RUN npm install # 将当前目录下全部文件拷贝到工作目录上 COPY . . RUN npm run build FROM nginx:alpine # 将打包后的dist目录下全部文件拷贝到nginx的html/目录下 COPY ./dist/ /usr/share/nginx/html/ # 删除nginx中之前的配置 RUN rm /etc/nginx/conf.d/default.conf # 拷贝当前的文件到nginx中 COPY nginx.conf /etc/nginx/nginx.conf COPY default.conf.template /etc/nginx/conf.d # 启动nginx CMD /bin/sh -c "envsubst '80' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf" && nginx -g 'daemon off;'
-
2、根目录下创建一个
nginx.conf
文件error_log stderr; pid /var/run/nginx.pid; events { worker_connections 1024; } http { access_log /dev/stdout; server_tokens off; include /etc/nginx/mime.types; include /etc/nginx/conf.d/*.conf; }
-
3、根目录下创建一个
default.conf.template
文件用于配置nginx
的配置文件server { listen 80 default_server; location ^~ / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } location @router { rewrite ^.*$ /index.html last; # 关键一句 } location ~* \.(?:manifest|appcache|html?|xml|json)$ { root /usr/share/nginx/html; if ($request_uri ~* .*[.](manifest|appcache|xml|json)$) { add_header Cache-Control "public, max-age=2592000"; } if ($request_filename ~* ^.*[.](html|htm)$) { add_header Cache-Control "public, no-cache"; } expires -1; } location ~* \.(?:js|css|map|jpg|png|svg|ico)$ { root /usr/share/nginx/html; try_files $uri =404; expires 1y; access_log off; add_header Cache-Control "public"; } location ~ ^.+\..+$ { root /usr/share/nginx/html; try_files $uri =404; include /etc/nginx/mime.types; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
-
4、根目录下创建一个
docker-compose.yml
的文件version: '3' services: nginx-vue: platform: linux/amd64 container_name: hospital-front build: context: . dockerfile: Dockerfile ports: - 80:80
-
5、直接运行
docker-compose up
三、分阶段构建
-
1、修改
Dockerfile
文件FROM node:14 as builder WORKDIR /app COPY package.json . RUN npm install COPY . . RUN npm run build # 二次构建 FROM nginx:alpine COPY --from=builder /app/dist/ /usr/share/nginx/html/ # COPY ./dist/ /usr/share/nginx/html/ RUN rm /etc/nginx/conf.d/default.conf COPY nginx.conf /etc/nginx/nginx.conf COPY default.conf.template /etc/nginx/conf.d CMD /bin/sh -c "envsubst '80' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf" && nginx -g 'daemon off;'