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

相关推荐
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
HED4 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
秦始皇爱找茬5 小时前
docker部署Jenkins工具
docker·容器·jenkins
清风细雨_林木木5 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ6 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了6 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
zru_96027 小时前
Docker 部署 Redis:快速搭建高效缓存服务
redis·缓存·docker
神仙别闹8 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
Golinie10 小时前
Docker底层原理浅析 | namespace+cgroups+文件系统
docker·容器·文件系统·cgroups·unionfs
白总Server10 小时前
Nginx 中间件
大数据·linux·运维·服务器·nginx·bash·web