拉取 Nginx 镜像
docker pull nginx
查看本地镜像
docker images
运行容器
docker run --name nginx -p 8080:80 -d nginx
–name nginx:容器名称。
-p 8080:80: 端口进行映射,将本地 8080 端口映射到容器内部的 80 端口。
-d nginx: 设置容器在在后台一直运行。
访问端口
通过浏览器可以直接访问 8080 端口的 nginx 服务
修改配置文件
查看容器内部的配置文件
docker exec nginx ls /etc/nginx
将容器内部的配置文件复制到宿主机/nginx目录下
docker cp -a nginx:/etc/nginx/ /nginx
进入/nginx修改宿主机的nginx配置文件
cd nginx/conf.d
vim default.conf
配置文件如下
server {
// 监听的端口号
listen 80;
// 监听的域名
server_name www.wushuai101.com;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
// vue静态资源代理
location / {
// vue项目dist文件路径
root /vuedemo/dist;
index index.html index.htm;
// 这个非常重要,采用vue-router的时候,必须配置这个
try_files $uri $uri/ /index.html;
}
// 后端api接口地址
location /api/ {
// 反向代理
proxy_pass http://47.96.77.69:8080/;
}
修改完保存退出,删除原来的容器
docker rm -f nginx
重新以挂载配置文件方式运行nginx容器
docker run --name nginx -p 80:80 -v /vuedemo:/vuedemo -v /nginx/:/etc/nginx/ -d nginx
-v /vuedemo:/vuedemo 将容器内路径映射到宿主机路径
现在可以通过nginx监听的IP+端口访问vue项目了