docker部署vue项目配置nginx docker vue nginx

下载nginx

docker pull nginx

docker images

# 创建挂载目录
mkdir -p /home/nginx/conf
mkdir -p /home/nginx/log
mkdir -p /home/nginx/html

容器中的nginx.conf文件和conf.d文件夹复制到宿主机

# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/nginx/

创建nginx容器之前需要删除之前的容器

# 直接执行docker rm nginx或者以容器id方式关闭容器
# 找到nginx对应的容器id
docker ps -a
# 关闭该容器
docker stop nginx
# 删除该容器
docker rm nginx
 
# 删除正在运行的nginx容器
docker rm -f nginx

创建新容器

docker run \
-p 80:80 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:latest

–name nginx	启动容器的名字
-d	后台运行
-p 80:80	将容器的 80(后面那个) 端口映射到主机的 80(前面那个) 端口
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf	挂载nginx.conf配置文件
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d	挂载nginx配置文件
-v /home/nginx/log:/var/log/nginx	挂载nginx日志文件
-v /home/nginx/html:/usr/share/nginx/html	挂载nginx内容
nginx:latest	本地运行的版本
\	shell 命令换行

开启nginx后

上传打包好的dist 前端文件

在任意目录下上传dist文件，并新建文件 dockerfile 。内容如下：

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER jiangyu
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

构建镜像：

# -t 是给镜像取名。
# 最后有一个点 “.”，表示使用当前路径下的 dockerfile 文件，也可以指定使用其它路径的。
docker build -t testvue .

查看新生成的镜像：

docker images

启动容器：

# -p ：配置端口映射，格式是外部访问端口：容器内端口
# -d ：后台运行  
# --name : 给容器取名
# 最后有 2 个 test-vue,前面一个是给容器取的名字，后面一个是使用的镜像的名字
 docker run -p 3000:80 -d --name testvue testvue

查看是否运行成功：

docker ps -a

访问192.168.1.29：3000端口：

成功

如果需要删除镜像：

docker ps -a 
docker stop + ID

docker images
docker rmi + ID

如果需要使用域名访问

 在创建的nginx文件：

编写server.conf文件：

server {
         listen  80;
         server_name vue.test;

         
         location ~ {
         proxy_pass http://192.168.1.29:3000;       
    }    

    
}

配置完成之后重启nginx、：

docker restart nginx

 在本机host部署

访问域名：

成功 

如果需要部署多个vue项目，

开启nginx后

上传打包好的vue1 前端文件

在任意目录下上传vue1文件，并新建文件 dockerfile 。内容如下：

FROM nginx
COPY vue/ /usr/share/nginx/html

FROM nginx
COPY vue1/ /usr/share/nginx/html

在当前目录下构建镜像vue1：

docker build -t vue1 .

启动容器vue1：

docker run -p 8000:80 -d --name vue1 vue1

启动成功

访问3000端口：

 

访问8000端口：

 

成功 

如果需要用域名访问

在主机host中添加vue1.test

 在 /home/nginx/conf/conf.d/下修改server.conf文件：

添加一个server模块：

server {
         listen  80;
         server_name vue1.test;


         location ~ {
         proxy_pass http://192.168.1.29:8000;
    }


}

重启nginx：

docker restart nginx

 

访问成功

之前的vue.test也是成功