Docker安装Nginx并部署vue项目

拉取 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  192.168.27.130;
    #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项目了