原标题：使用Docker Nginx部署vue项目
Vue3 项目打包
打包 Vue 项目在根目录使用以下命令：
npm run buildnpm run buildnpm run build
执行以上命令，输出结果如下：
执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。
文章来源地址https://www.yii666.com/blog/346176.html
可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决
Dockerfile
在根目录新建Dockerfile文件www.yii666.com
FROM nginx WORKDIR <span class="token operator">/</span>app MAINTAINER LX COPY <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span> <span class="token operator">/</span>app ADD <span class="token punctuation">.</span><span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf EXPOSE <span class="token number">80</span>FROM nginx WORKDIR <span class="token operator">/</span>app MAINTAINER LX COPY <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span> <span class="token operator">/</span>app ADD <span class="token punctuation">.</span><span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf EXPOSE <span class="token number">80</span>FROM nginx WORKDIR /app MAINTAINER LX COPY ./dist/ /app ADD ./nginx.conf /etc/nginx/nginx.conf EXPOSE 80
Nginx
在项目根目录创建 nginx.conf 文件
Nginx 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等
user nginx<span class="token punctuation">;</span> worker_processes <span class="token number">1</span><span class="token punctuation">;</span> error_log <span class="token operator">/</span>var<span class="token operator">/</span>log<span class="token operator">/</span>nginx<span class="token operator">/</span>error<span class="token punctuation">.</span>log warn<span class="token punctuation">;</span> pid <span class="token operator">/</span>var<span class="token operator">/</span>run<span class="token operator">/</span>nginx<span class="token punctuation">.</span>pid<span class="token punctuation">;</span> events <span class="token punctuation">{<!-- --></span> worker_connections <span class="token number">1024</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> http <span class="token punctuation">{<!-- --></span> include <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>mime<span class="token punctuation">.</span>types<span class="token punctuation">;</span> default_type application<span class="token operator">/</span>octet<span class="token operator">-</span>stream<span class="token punctuation">;</span> log_format main <span class="token string">'$remote_addr - $remote_user [$time_local] "$request" '</span> <span class="token string">'$status $body_bytes_sent "$http_referer" '</span> <span class="token string">'"$http_user_agent" "$http_x_forwarded_for"'</span><span class="token punctuation">;</span> access_log <span class="token operator">/</span>var<span class="token operator">/</span>log<span class="token operator">/</span>nginx<span class="token operator">/</span>access<span class="token punctuation">.</span>log main<span class="token punctuation">;</span> sendfile on<span class="token punctuation">;</span> keepalive_timeout <span class="token number">65</span><span class="token punctuation">;</span> server <span class="token punctuation">{<!-- --></span> listen <span class="token number">8080</span><span class="token punctuation">;</span> server_name localhost<span class="token punctuation">;</span> location <span class="token operator">/</span> <span class="token punctuation">{<!-- --></span> root <span class="token operator">/</span>app<span class="token punctuation">;</span> index index<span class="token punctuation">.</span>html<span class="token punctuation">;</span> try_files $uri $uri<span class="token operator">/</span> <span class="token operator">/</span>index<span class="token punctuation">.</span>html<span class="token punctuation">;</span> <span class="token punctuation">}</span> error_page <span class="token number">404</span> <span class="token operator">/</span>40x<span class="token punctuation">.</span>html<span class="token punctuation">;</span> location <span class="token operator">=</span> <span class="token operator">/</span>40x<span class="token punctuation">.</span>html <span class="token punctuation">{<!-- --></span> root <span class="token operator">/</span>usr<span class="token operator">/</span>share<span class="token operator">/</span>nginx<span class="token operator">/</span>html<span class="token punctuation">;</span> <span class="token punctuation">}</span> location <span class="token operator">/</span>app<span class="token operator">/</span> <span class="token punctuation">{<!-- --></span> proxy_pass http<span class="token punctuation">:</span><span class="token operator">//</span>ip<span class="token punctuation">:</span>port<span class="token operator">/</span>app<span class="token operator">/</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>user nginx<span class="token punctuation">;</span> worker_processes <span class="token number">1</span><span class="token punctuation">;</span> error_log <span class="token operator">/</span>var<span class="token operator">/</span>log<span class="token operator">/</span>nginx<span class="token operator">/</span>error<span class="token punctuation">.</span>log warn<span class="token punctuation">;</span> pid <span class="token operator">/</span>var<span class="token operator">/</span>run<span class="token operator">/</span>nginx<span class="token punctuation">.</span>pid<span class="token punctuation">;</span> events <span class="token punctuation">{<!-- --></span> worker_connections <span class="token number">1024</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> http <span class="token punctuation">{<!-- --></span> include <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>mime<span class="token punctuation">.</span>types<span class="token punctuation">;</span> default_type application<span class="token operator">/</span>octet<span class="token operator">-</span>stream<span class="token punctuation">;</span> log_format main <span class="token string">'$remote_addr - $remote_user [$time_local] "$request" '</span> <span class="token string">'$status $body_bytes_sent "$http_referer" '</span> <span class="token string">'"$http_user_agent" "$http_x_forwarded_for"'</span><span class="token punctuation">;</span> access_log <span class="token operator">/</span>var<span class="token operator">/</span>log<span class="token operator">/</span>nginx<span class="token operator">/</span>access<span class="token punctuation">.</span>log main<span class="token punctuation">;</span> sendfile on<span class="token punctuation">;</span> keepalive_timeout <span class="token number">65</span><span class="token punctuation">;</span> server <span class="token punctuation">{<!-- --></span> listen <span class="token number">8080</span><span class="token punctuation">;</span> server_name localhost<span class="token punctuation">;</span> location <span class="token operator">/</span> <span class="token punctuation">{<!-- --></span> root <span class="token operator">/</span>app<span class="token punctuation">;</span> index index<span class="token punctuation">.</span>html<span class="token punctuation">;</span> try_files $uri $uri<span class="token operator">/</span> <span class="token operator">/</span>index<span class="token punctuation">.</span>html<span class="token punctuation">;</span> <span class="token punctuation">}</span> error_page <span class="token number">404</span> <span class="token operator">/</span>40x<span class="token punctuation">.</span>html<span class="token punctuation">;</span> location <span class="token operator">=</span> <span class="token operator">/</span>40x<span class="token punctuation">.</span>html <span class="token punctuation">{<!-- --></span> root <span class="token operator">/</span>usr<span class="token operator">/</span>share<span class="token operator">/</span>nginx<span class="token operator">/</span>html<span class="token punctuation">;</span> <span class="token punctuation">}</span> location <span class="token operator">/</span>app<span class="token operator">/</span> <span class="token punctuation">{<!-- --></span> proxy_pass http<span class="token punctuation">:</span><span class="token operator">//</span>ip<span class="token punctuation">:</span>port<span class="token operator">/</span>app<span class="token operator">/</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; server { listen 8080; server_name localhost; location / { root /app; index index.html; try_files $uri $uri/ /index.html; } error_page 404 /40x.html; location = /40x.html { root /usr/share/nginx/html; } location /app/ { proxy_pass http://ip:port/app/; } } }
构建你的 Docker 镜像
将项目上传到服务器后开始构建镜像(我是在服务器上从github上拉去的项目)
切换到镜像所在目录
sudo docker build <span class="token operator">-</span>t dupchecking<span class="token operator">-</span>vue<span class="token punctuation">:</span><span class="token number">1.0</span> <span class="token punctuation">.</span>sudo docker build <span class="token operator">-</span>t dupchecking<span class="token operator">-</span>vue<span class="token punctuation">:</span><span class="token number">1.0</span> <span class="token punctuation">.</span>sudo docker build -t dupchecking-vue:1.0 .
运行你的 Docker 镜像
这个例子基于官方 Nginx 镜像，因此已经设置了日志重定向并关闭了自我守护进程。它也提供了其他有利于 Nginx 在 Docker 容器中运行的默认设置。文章来源站点https://www.yii666.com/
sudo docker run <span class="token operator">-</span>d <span class="token operator">-</span>p <span class="token number">0.0</span><span class="token number">.0</span><span class="token number">.0</span><span class="token punctuation">:</span><span class="token number">80</span><span class="token punctuation">:</span><span class="token number">80</span> 镜像<span class="token builtin">id</span> curl localhost<span class="token punctuation">:</span><span class="token number">80</span>sudo docker run <span class="token operator">-</span>d <span class="token operator">-</span>p <span class="token number">0.0</span><span class="token number">.0</span><span class="token number">.0</span><span class="token punctuation">:</span><span class="token number">80</span><span class="token punctuation">:</span><span class="token number">80</span> 镜像<span class="token builtin">id</span> curl localhost<span class="token punctuation">:</span><span class="token number">80</span>sudo docker run -d -p 0.0.0.0:80:80 镜像id curl localhost:80
vue-cli部署官网
上面的的部署方式需要在本地npm run build生成dist文件，如果代码做修改的话还得重新生成镜像
Dockerfile也可以这样写文章来源地址https://www.yii666.com/blog/346176.html
FROM node<span class="token punctuation">:</span><span class="token number">12</span> WORKDIR <span class="token operator">/</span>app COPY <span class="token punctuation">.</span><span class="token operator">/</span> <span class="token operator">/</span>app RUN npm install <span class="token operator">&</span><span class="token operator">&</span> npm run build FROM nginx RUN mkdir <span class="token operator">/</span>app COPY <span class="token operator">-</span><span class="token operator">-</span><span class="token keyword">from</span><span class="token operator">=</span><span class="token number">0</span> <span class="token operator">/</span>app<span class="token operator">/</span>dist <span class="token operator">/</span>app ADD <span class="token punctuation">.</span><span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>nginx<span class="token punctuation">.</span>confFROM node<span class="token punctuation">:</span><span class="token number">12</span> WORKDIR <span class="token operator">/</span>app COPY <span class="token punctuation">.</span><span class="token operator">/</span> <span class="token operator">/</span>app RUN npm install <span class="token operator">&</span><span class="token operator">&</span> npm run build FROM nginx RUN mkdir <span class="token operator">/</span>app COPY <span class="token operator">-</span><span class="token operator">-</span><span class="token keyword">from</span><span class="token operator">=</span><span class="token number">0</span> <span class="token operator">/</span>app<span class="token operator">/</span>dist <span class="token operator">/</span>app ADD <span class="token punctuation">.</span><span class="token operator">/</span>nginx<span class="token punctuation">.</span>conf <span class="token operator">/</span>etc<span class="token operator">/</span>nginx<span class="token operator">/</span>nginx<span class="token punctuation">.</span>confFROM node:12 WORKDIR /app COPY ./ /app RUN npm install && npm run build FROM nginx RUN mkdir /app COPY --from=0 /app/dist /app ADD ./nginx.conf /etc/nginx/nginx.conf
使用docker compose 管理容器
version<span class="token punctuation">:</span> <span class="token string">"3.8"</span> services<span class="token punctuation">:</span> duplicatech<span class="token punctuation">:</span> build<span class="token punctuation">:</span> <span class="token punctuation">.</span> image<span class="token punctuation">:</span> duplicatech<span class="token punctuation">:</span><span class="token number">1.0</span><span class="token number">.1</span> ports<span class="token punctuation">:</span> <span class="token operator">-</span> <span class="token string">"8080:8080"</span> container_name<span class="token punctuation">:</span> <span class="token string">"duplicatech"</span> networks<span class="token punctuation">:</span> <span class="token operator">-</span> app_net networks<span class="token punctuation">:</span> app_net<span class="token punctuation">:</span>version<span class="token punctuation">:</span> <span class="token string">"3.8"</span> services<span class="token punctuation">:</span> duplicatech<span class="token punctuation">:</span> build<span class="token punctuation">:</span> <span class="token punctuation">.</span> image<span class="token punctuation">:</span> duplicatech<span class="token punctuation">:</span><span class="token number">1.0</span><span class="token number">.1</span> ports<span class="token punctuation">:</span> <span class="token operator">-</span> <span class="token string">"8080:8080"</span> container_name<span class="token punctuation">:</span> <span class="token string">"duplicatech"</span> networks<span class="token punctuation">:</span> <span class="token operator">-</span> app_net networks<span class="token punctuation">:</span> app_net<span class="token punctuation">:</span>version: "3.8" services: duplicatech: build: . image: duplicatech:1.0.1 ports: - "8080:8080" container_name: "duplicatech" networks: - app_net networks: app_net:
原文链接：https://www.yii666.com/blog/346176.html
© 版权声明
声明📢本站内容均来自互联网，归原创作者所有，如有侵权必删除。
本站文章皆由CC-4.0协议发布，如无来源则为原创，转载请注明出处。
THE END
