使用DockerNginx部署vue项目-陌上烟雨遥

Vue3 项目打包

打包 Vue 项目在根目录使用以下命令：

npm 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 /app  MAINTAINER LX  COPY ./dist/ /app  ADD ./nginx.conf /etc/nginx/nginx.conf  EXPOSE 80

Nginx

在项目根目录创建 nginx.conf 文件
Nginx 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等

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 -t dupchecking-vue:1.0 .

运行你的 Docker 镜像

这个例子基于官方 Nginx 镜像，因此已经设置了日志重定向并关闭了自我守护进程。它也提供了其他有利于 Nginx 在 Docker 容器中运行的默认设置。文章来源站点https://www.yii666.com/

 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: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: "3.8" services: duplicatech: build: . image: duplicatech:1.0.1        ports: - "8080:8080" container_name: "duplicatech" networks: - app_net networks: app_net: