Docker容器部署 vue项目

1、服务器上安装docker，此步骤省略。

2、docker获取nginx镜像：

docker pull nginx

3、创建 nginx config 配置文件：

在指定目录下创建 default.conf，写入你想要配置的内容（下方只举例部分列子）：

  server {
        listen       7001;
        server_name  10.19.23.114;
        location / {
            root   /usr/share/nginx/html/dist;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		location /prod-api/{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	
			proxy_pass http://10.19.11.215:7777/;
		}
		location /profile/{
			# 方式一：指向地址
			proxy_pass http://10.19.11.215:7777/;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

在相同目录下再次创建 nginx.conf，写入和 default.conf 相同的内容。

4、创建 Dockerfile 文件，填写以下内容（注意要删掉注释）：

FROM nginx   # 代表下载最新版本nginx

VOLUME /log  # 日志存放路径

RUN rm /etc/nginx/nginx.conf           # 删除原来的nginx配置文件

ADD nginx.conf /etc/nginx/             # 将当前目录下的配置文件复制到原来目录下

RUN rm /etc/nginx/conf.d/default.conf  # 删除原来的nginx默认配置文件

ADD default.conf /etc/nginx/conf.d/    # 将当前目录下的默认配置文件复制到原来目录下

COPY www/ /usr/share/nginx/html/       # 将根目录 www 文件夹下的所有包移动到容器内指定位置

5、首先确保安装了node.js，npm可用，执行容器命令构建docker镜像：

docker build -t yxdc-ima .

注意不要少了最后的“.”(点)

-t是给镜像命名，.(点)是基于当前目录的 Dockerfile 来构建镜像

6、启动容器，本命令是基于多个服务的情况下映射多个端口：

docker run -d -p 7001:7001 -p 7005:7005 -p 7008:7008 --name yxdc-doc yxdc-ima

docker run：基于镜像启动一个容器

-d：后台方式启动

-p 7001:7001: 端口映射，将宿主机的7001端口映射到容器的7001端口

--name：容器名，我起的叫 yxdc-doc

yydc-ima：刚刚构建的要启动的镜像名称

 查看所有启动的容器命令：docker ps -a

7、如果版本更新迭代再次发布就得删除容器重新构建，本人写的以下脚本仅供参考：

#!/bin/bash
cd /root
docker stop yxdc-doc
docker rm yxdc-doc
docker build -t yxdc-ima .
docker run -d -p 7001:7001 -p 7005:7005 -p 7008:7008 --name yxdc-doc yxdc-ima

附上容器的使用命令链接：

docker 常用命令大全_保护我方胖虎的博客-CSDN博客_docker常用命令

docker 中如何查看日志命令

Docker 部署VUE项目 - Memoyu - 博客园