vue 项目部署

1、vue 项目编译

vue 项目编译，并打包成 dist 文件

1
npm run build

2、dist 文件夹上传到云服务器

将 dist 文件夹上传到云服务器中（需把 dist 和 dockerfile 文件放在同一目录下）

3、拉去 nginx 镜像

1
docker pull nginx

4、在同一目录下创建 default.conf 文件

云服务器 ip 为公网 ip

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
server {
  listen       8880;
  listen  [::]:8880;
  server_name  121.40.101.237;

  access_log  /var/log/nginx/host.access.log  main;

  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;

      # 新增下面这句，其他是默认nginx配置
      # 解决部分前端框架的路由问题，在浏览器刷新报错404
      try_files $uri $uri/ /index.html;
  }
        # 配置代理，解决跨域问题
  location /admin {
            proxy_set_header Host $host;
            proxy_set_header  X-Real-IP        $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            # 加/代表会丢弃/admin,这里8888后面不加，防止丢失路径
            proxy_pass http://121.40.101.237:8888;
   }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
}

5、编写 Dockerfile 文件

1
vim Dockerfile

Dockerfile 文件内容

1
2
3
4
5
6
7
8
9
FROM nginx

MAINTAINER cj

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

Dockerfile 内容解释 docker

1
2
3
4
5
6
7
8
9
FROM nginx：该镜像是基于nginx:latest镜像构建的

MAINTAINER cj：添加说明

RUN rm /etc/nginx/conf.d/default.conf：删除目录下的default.conf文件

ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置

COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

6、运行 Dockerfile 文件

1
docker build -t jy_furniture_sale_manage_qd:1.0 .

7、运行镜像

1
docker run --name=jy_furniture_sale_manage_qd -d -p 8880:8880 jy_furniture_sale_manage_qd:1.0