docker 搭建 nginx 部署前端项目

本文主要介绍如何使用docker安装nginx，以及如何将前端打包好的vue项目部署到nginx上。

1. 拉取nginx镜像：

docker pull nginx

2. 运行docker镜像：

docker run --name nginx-test -p 8080:80 -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
# 查看正在运行和未运行的容器
docker ps -a

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 -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf/nginx:/etc/nginx -d nginx

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

关于修改nginx的配置文件

cd /home/nginx/conf
到这个目录下，我们可以看到一个: nginx.conf，这个文件是配置nginx的主文件
cd /home/nginx/conf/conf.d
到这个目录下，我们可以看到一个: default.conf，这个文件就是配置nginx的子文件
因为 nginx.conf 中有一行代码：

#子配置文件放置路径
include /etc/nginx/conf.d/*.conf;

注意文件结构，例如：http{ server{ } } 等

参考：
nginx.conf：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    #子配置文件放置路径
    include /etc/nginx/conf.d/*.conf;

    #负载均衡 分配
#    upstream backend {
#        server 127.0.0.1:8081 max_fails=5 fail_timeout=10s weight=1;
#        #server 127.0.0.1:8082 max_fails=5 fail_timeout=10s weight=1;
#    }
}

default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        # 指定前端项目所在的位置
        root   /usr/share/nginx/html/hmdp;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
    
    location /api {  
        default_type  application/json;
        #internal;  
        keepalive_timeout   30s;  
        keepalive_requests  1000;  
        #支持keep-alive  
        proxy_http_version 1.1;  
        rewrite /api(/.*) $1 break;  
        proxy_pass_request_headers on;
        #more_clear_input_headers Accept-Encoding;  
        proxy_next_upstream error timeout;  
        proxy_pass http://127.0.0.1:8081;
        #proxy_pass http://backend;
    }
}

其它问题：

Linux 系统目录结构详解
docker创建（run）容器后容器自动关闭
Docker安装redis、nacos、rabbitmq、nginx
深度详解Nginx正向代理与反向代理