如何通過Docker啓動Nginx部署前端項目，包括Nginx的詳細配置和踩坑教程？

首先說明一下，我的目標是要通過Docker拉取一個新的Nginx鏡像然後啓動Nginx，然後映射出來的瀏覽器的地址端口要爲http://10.1.2.10:8989，當如果需要請求後端數據的時候，需要把數據轉發到後端的ip端口爲：http://10.1.2.10:8999。中間Nginx配置踩了好多坑

（1）首先你需要從DockerHub上拉取一個Nginx的官方鏡像（這裏我沒有直接寫Dockerfile來使用，我是使用的是掛載的方式進行配置文件）

（2）然後你需要準備Nginx的配置文件，這裏就開始有坑了，先過一遍坑，在進行配置Nginx文件

1. 首先Nginx的配置文件有兩個，一個是nginx.conf文件，在docker中運行的Nginx容器內部的/etc/nginx/nginx.conf 這個路徑下，他的默認配置其實是不用改的，我一開始以爲是需要在這個文件中進行配置，但是事實上這是一個巨大的坑，先看一下這個默認的配置中都有啥
   
   nginx.conf文件的內容：

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;
	#這個核心的配置文件其實都應該是在這個文件中，在conf.d/default.conf這個路徑中
    include /etc/nginx/conf.d/*.conf;
}

（3）然後需要去看一下conf.d/default.conf這個路徑下配置自己的Nginx文件的時候需要注意的幾點：

1. 這個路徑在容器中的路徑下，
   
2. 然後下面這個是真正去需要自己配置Nginx核心配置文件的這個代碼

server {
#注意點一：這裏需要注意的是這個監聽的端口不是你的nginx監聽前端瀏覽器的那個8989端口，
#這個80端口其實是nginx自己內部服務的端口你在docker中啓動nginx服務run的時候是
#需要把Nginx容器內部80映射到前端瀏覽器的8989端口，這裏後面會說
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;

    #location / {
    #    root   /html-resources/html-cloud;
    #    index  index.html index.htm;
    #}

        ### console控制檯配
    location = / {
#注意點二：這個地方的root跟的就是你Docker中Nginx容器內部的路徑，這個路徑放的是你的項目路徑
#這個路徑是我自己在使用run命令的時候掛載上去的，這裏裏面也就是你的前端的靜態資源
            root   /html-resources/html-cloud; 
                        index  index.html index.htm;
        }
        #location = /index.html {
        #   root   /html-resources/html-cloud;    
        #}
        location = /test.html {
            root   /html-resources/html-cloud;
        }
    ###風險大盤
    location = /dashboard/index.html {
            root   /html-resources/html-cloud;    
        }

        location / {    
#注意點三：  這裏其實就是當你需要請求後端接口的時候就需要nginx進行一個轉發代理的功能
#直接轉發到你後端服務器的ip加端口
            proxy_pass      http://10.1.2.10:8999;      
            client_max_body_size  1000m;  
        }     
        location ^~ /static/report/ {
            root   /html-resources/html-cloud;    
        }
        location ^~ /report/generateReport{
            proxy_pass      http://10.1.2.10:8999;   
        }

        location ^~ /docs/ {
            root   /html-resources/html-cloud;    
        }
        
    ### 通用配置
        location ~ ^/(WEB-INF)/ {      
            deny all;      
        }

        location ~ /\.ht {
            deny  all;
        }

        location ~ \.(gif|jpg|png|js|css|woff|ttf|svg|json|xlsx|ico)$ {
            root   /html-resources/html-cloud;
            if (-f $request_filename) {
                expires 1h;
                break;
            }        }
   
        error_page   404  /404.html;      
        location = /404.html {     
            root   /html-resources/html-cloud;    
        }   
 
        error_page   500 502 503 504  /50x.html;     
        location = /50x.html {     
            root   /html-resources/html-cloud;    
        }     
    }

#從這裏開始都是nginx配置中自己默認的原有的配置，這裏我沒有刪除，只是都注掉了，
#上面的都是我自己根據自己的項目進行配置的
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.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;
    #}

（4）然後你就需要根據我上面說的幾個需要注意的點，然後去啓動自己的Nginx容器：

1. 你需要把你的前端文件上傳到一個目錄下，這個目錄你需要掛載到Docker中Nginx的容器內部的，比如我是放到這個目錄下的
2. 然後我還準備好了我需要掛載的Nginx的配置文件conf.d/default.conf這個配置文件，文件內容就是上面的代碼
   

（5）然後最後一步就是開始去啓動Nginx這個容器了

1. 使用命令：docker run --name wangwei-nginx -p 8989:80 -v /home/dx/wangwei/html-cloud:/html-resources/html-cloud -v /home/dx/wangwei/log/nginx:/var/log/nginx -v /home/dx/wangwei/conf.d/default.conf:/etc/nginx/conf.d/default.conf -d nginx
2. -p：表示把容器Nginx內部的80端口映射到宿主機中的8989端口
3. -v：表示把宿主機中的文件掛載到Docke中Nginx容器中的內部
4. -d：表示後臺運行Nginx容器
5. –name：表示給這個運行的Nginx容器起一個別名
6. 運行成功之後的圖就是：
   
7. 然後瀏覽器前端運行http://10.1.2.10:8989 端口就完事了

到最後其實還會有一些想要給你說的可能會用到的命令：

1. 在docker中Nginx容器內部是不能進行vim的需要兩條命令：apt-get update 然後：apt-get install vim
2. 如何把宿主機中的文件拷貝到容器內部：docker cp /home/dx/wangwei/html-cloud 1ee50b27c049:/html-resources/
3. 如何把容器內部的文件拷貝到宿主機中：docker cp 1ee50b27c049:/etc/nginx/conf.d/default.conf /home/dx/wangwei
4. 進入容器中的內部：docker exec -it 容器ID bash
5. 在把本地的Dockerfile文件需要拷貝的文件都在上傳到Linux上的 時候會報錯standard_init_linux.go:207: exec user process caused “exec format error”，原因是由windows平臺的dos編碼遷移到unix系統下容易的unix編碼引發的問題