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博客

相关推荐
sauTCc15 小时前
Docker初探
docker
c无序15 小时前
【Docker-7】Docker是什么+Docker版本+Docker架构+Docker生态
docker·容器·架构
FixBug_Nick15 小时前
使用Docker安装及使用最新版本的Jenkins
docker·容器·jenkins
ElasticPDF-新国产PDF编辑器15 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin17 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌17 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
xujiangyan_17 小时前
nginx的反向代理和负载均衡
服务器·网络·nginx
头顶秃成一缕光18 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs18 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
Zero_to_zero123418 小时前
解决docker的ubuntu系统中文乱码问题
ubuntu·docker·容器