docker 搭建nginx部署前端项目

1.简介

简单记录一下docker搭建部署前端的流程

2.操作

(1) 拉取nginx镜像：

docker pull nginx

(2) 运行docker镜像：

docker run --name nginx-test -p 8080:80 -p 443:443 -v /home/nginx/html:/usr/share/nginx/html -d nginx

--name nginx-test：容器名称（自定义的）
-p 8080:80：端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。
-d nginx：设置nginx容器在后台一直运行
-v：/home/nginx/html 这是服务器中的目录映射到nginx容器中的/usr/share/nginx/html中,大概意思就是两个是一个双向绑定的关系，映射后服务器中的目录内容改变nginx容器中的也会变，反之相同

(3) 查看容器

命令:docker ps

1663232854731.png

(4) 把nginx容器/etc/nginx中的配置文件拷贝到服务器/home/nginx/conf中：

docker cp 容器id:/etc/nginx /home/nginx/conf

(5) 删除前面运行的容器

停止: docker stop nginx-test
删除: docker rm nginx-test

(6) 重新运行nginx镜像

docker run --name nginx-test -p 8080:80 -p 443:443 -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx -d nginx

值得注意的两个点：
一个是nginx镜像中的：/usr/share/nginx/html，这个目录是用于放具体的前端项目的，我们将它映射到你的服务器中的这个目录: /home/nginx/html；还有一个是nginx镜像中的： /etc/nginx，这个目录里面有nginx的配置文件，咱们映射到服务器：/home/nginx/conf里面。映射了这个目录以后，修改nginx的配置文件就可以不用再到容器里面了，可以直接到服务器的/home/nginx/conf里面去修改nginx的配置文件。

(7) 如何修改nginx的配置文件

cd /home/nginx/conf/conf.d
到这个目录下，我们可以看到一个: default.conf，这个文件就是配置nginx的关键文件

server {
    listen 80; #侦听80端口
    listen 443 ssl; #侦听443端口，用于SSL
    server_name www.xxxxx.com;  # 自己的域名
    # 注意证书文件名字和位置，是从/etc/nginx/下开始算起的也就是我们自己服务器/home/nginx/conf下，cert 
    #是自己新建的放证书的文件夹
    ssl_certificate cert/xxxxxxx.pem;
    ssl_certificate_key cert/xxxxxxxx.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    client_max_body_size 1024m;

    location / {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       # enables WS support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection  "upgrade";
    # 这里写的是我的阿里云内网地址,不知道为啥,不能用127.0.0.1...
        proxy_pass http://xxxxxxxx:8081;
        
       
    }
}

然后把文件传到：/home/nginx/html里面，如下图：

1663233621691.png

然后浏览器访问即可，如下图：

1663233712514.png