docker nginx 部署vue 实例

1.安装docker

https://blog.csdn.net/apgk1/article/details/144354588

2. 安装nginx

docker 安装 nginx-CSDN博客

3. 复制 nginx-test 实例的一些文件到宿主机中，目前已 **/home/jznh/**路径演示

3.1 在/home/jznh/ 创建 conf html logs 三个文件夹，如下图

3.2把 nginx-test 运行的实例中一些文件复制到已创建的目录中，如下图

3.3 目前 nginx-test 实例使命已完成，可以考虑删除

//逐条执行
docker stop nginx-test
docker rm nginx-test

3.4 对于已创建的文件夹文件进行权限修改，偷懒直接 全开放 chmod 777 文件夹名称

3.5 把vue已打包好的项目文件 通过ftp直接上传/home/jznh/html 文件夹中

4.修改 /home/jznh/conf/nginx.conf

#注释其中 在下方的这句中头部加入 #注释掉
include /etc/nginx/conf.d/*.conf;

#如下：
#include /etc/nginx/conf.d/*.conf;
#加入以下内容
server {
    listen 80;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;#注意该地址是容器内的，千万别改成宿主机的，会导致访问不到
        index index.html;
        #vue刷新404 问题
        try_files $uri $uri/ /index.html;    
    }
}

6.创建并且运行当前docker 实例

docker run \
-p 8083:80 \
--name jznh \
-v /home/jznh/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/jznh/conf/conf.d:/etc/nginx/conf.d \
-v /home/jznh/html:/usr/share/nginx/html \
-v /home/jznh/logs:/var/log/nginx/ \
--restart=always \
-d nginx

-p 8081:80  宿主机的8081 端口映射到容器中的80端口
--name 容器的名称
-v 那些都是路径映射 前面宿主机路径:容器中路径
--restart=always docker容器重启自动启动当前容器
-d nginx docker镜像

6.访问该宿主机的ip:8083是否正常访问

参考链接

docker安装nginx，docker部署vue前端，以及docker部署java的jar部署_docker 安装 nginx 部署vue-CSDN博客