使用Docker Nginx部署vue项目

Vue3 项目打包

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

npm run build
1

执行以上命令，输出结果如下：

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决

Dockerfile

在根目录新建Dockerfile文件

# 基础镜像
FROM nginx
#创建app目录
WORKDIR /app
# 作者
MAINTAINER LX
#将打包后的dict目录复制到容器的app目录下
COPY ./dist/  /app
# 用自定义的nginx.conf 去覆盖镜像中原本的nginx.conf配置u文件
ADD ./nginx.conf /etc/nginx/nginx.conf
#暴露80端口，也就是会在服务器上的80端口提供你的Vue项目(这个端口可以设置为其他的，别和其他的端口重复就行)
EXPOSE 80
1
2
3
4
5
6
7
8
9
10
11
12

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       80;       # 监听dockerfile提供的80端口
    server_name  127.0.0.1; #这里也可以写成localhost
    location / {  
      root   /app;   # dockerfile中创建的app,里面有打包后的dist文件
      index  index.html;
      try_files $uri $uri/ /index.html;  
    }
    error_page  404 /40x.html;
    location = /40x.html {
      root   /usr/share/nginx/html;
    }
    # 后端接口，反向代理  
    location /app {
       #  反向代理 访问App开头的路由会到这里  
       proxy_pass http://ip:port/app/;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

构建你的 Docker 镜像

将项目上传到服务器后开始构建镜像(我是在服务器上从github上拉去的项目)
切换到镜像所在目录

sudo docker build -t dupchecking-vue:1.0 .
1

运行你的 Docker 镜像

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

# 访问服务器的80端口会映射到docker
 sudo docker run -d -p 0.0.0.0:80:80 镜像id
 #查看启动后
 curl localhost:80
 # ...
1
2
3
4
5

vue-cli部署官网