使用docker+nginx部署vue项目
首先准备好docker环境，在centos下的环境如下：首先拉取最新的nginx命令：docker pull nginx在data下面创建分别创建以下四个目录mkdir -p /mydata/nignx/conf 挂载容器里面的配置，即nginx.confmkdir -p /mydata/nignx/conf.d 挂载容器里面的子配置,即nginx.conf里面include的配置文件mkdir
·
- 首先准备好docker环境，在centos下的
环境如下：
- 首先拉取最新的nginx
命令：
docker pull nginx
- 在data下面创建分别创建以下四个目录
mkdir -p /mydata/nignx/conf 挂载容器里面的配置，即nginx.conf
mkdir -p /mydata/nignx/conf.d 挂载容器里面的子配置,即nginx.conf里面include的配置文件
mkdir -p /mydata/nignx/logs 挂载容器里面的代理的日志文件
mkdir -p /mydata/nignx/html 挂载容器里面的界面的访问 - 启动nginx(先不挂载nginx.con配置文件)
docker run --name nginx -d -p 80:80 --name nginx1.0 \
-v /mydata/nignx/logs:/var/log/nginx nginx
- 然后使用如下命令进入交互式终端：
docker exec -it nginx1.0 /bin/bash
进入后可以看到在nginx1.0的容器中：
/etc/nginx/目录下存在nginx.conf，
/etc/nginx/conf.d/目录下存在default.conf文件
- 退出容器，使用下面的命令，将容器中的两个文件拷贝到我们前面准备的指定挂载mulxia
docker cp nginx1.0:/etc/nginx/nginx.conf /mydata/nignx/conf/ #使用id或names【mynginx】
docker cp nginx1.0:/etc/nginx/conf.d/default.conf /mydata/nignx/conf.d/
- 删除容器
docker stop nginx1.0
docker rm -f nginx1.0
- 使用挂载目录去创建nginx容器并启动命令：
docker run --name nginx -d -p 7070:80 \
-v /mydata/nignx/html:/usr/share/nginx/html \
-v /mydata/nignx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /mydata/nignx/conf.d:/etc/nginx/conf.d \
-v /mydata/nignx/logs:/var/log/nginx nginx
命令解读：
run：启动一个docker容器
name：容器的名称
d: 后台启动
p: 绑定别的端口 -p a:b 将宿主机器的a端口绑定到容器的b端口 -P 为随机绑定到端口
v : 挂载的内容 宿主机器的文件夹：容器的文件夹 - 随便写一个html页面放到/mydata/nignx/html下，否则会报403
效果：
- ok上面nginx配置好了，开始打包我们的vue项目
首先修改config下的index.js文件
- 打包vue项目路径：
命令：cnpm run build
打包完成后再vue项目的目录下会多出一个dist目录
- 将dist目录上传到linux指定的目录下，并且编写Dockerfile文件以及default.conf文件
- default.conf文件
- Dockerfile文件
- 执行我们的Dockerfile文件生成amsvue容器
命令：
docker build -t amsvue .
如上可发现已经生成镜像文件 - 下面我们创建并且启动容器
命令：
docker run --name=amsvue -d -p 9090:80 amsvue
- 效果(后台接口调用成功)
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)