一、introduction

一個docker image、用于部署前端、使用nginx、配置https、訪問80直接跳轉回443、適用于使用了react router或vue-router

二、preparation

• docker
• cert
• react/vue/… project

三、step

方法一、使用nginx基礎image

1、找到你的cert，然后創建nginx.conf用于修改nginx配置

user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;
	
	#http server
    server {
        listen       80;
        server_name  www.whatsit.top;
		
		#轉回https
        return 301 https://$server_name$request_uri;
    }


    #HTTPS server
    server {
        listen       443 ssl;
        server_name  www.whatsit.top;

		#你的cert
        ssl_certificate      whatsit.crt;
        ssl_certificate_key  whatsit.rsa;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            #專案build后的static檔案位置
            root   /usr/share/nginx/html;
            index  index.html;
            
            #始終跳回index.html，給自己的router來處理
            try_files $uri /index.html;
       }
    }

}

ps. 為了方便，將以上三個檔案都放在一起

2、在frontend專案下創建Dockerfile

#nginx image
FROM nginx

#將上面的nginx.conf放到鏡像中
COPY dockerConf/nginx.conf /etc/nginx/nginx.conf

#將專案build后的static檔案放到鏡像中
COPY build/ /usr/share/nginx/html

#將你的cert放到鏡像中
COPY dockerConf/whatsit.crt /etc/nginx
COPY dockerConf/whatsit.rsa /etc/nginx

3、build image

#注意后面的"."
docker build -t nginx-react1 .

4、將image匯出并上傳到你的server

#在local匯出成tar
docker save -o nginx-react1.tar nginx-react1

#在server上匯入這個image
docker load --input nginx-react1.tar

5、run image

#映射port 443->443 80->80
docker run -p 443:443 -p 80:80 nginx-react1

#后臺運行
docker run -d -p 443:443 -p 80:80 nginx-react1

啟動后即可訪問

方法二、使用centos基礎image

• 該方法除了nginx.conf以及Dockerfile不同，其他步驟一樣

nginx.conf

#添加下面這一行
daemon off;
user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  www.whatsit.top;

        return 301 https://$server_name$request_uri;
    }


    #HTTPS server

    server {
        listen       443 ssl;
        server_name  www.whatsit.top;

        # 路徑需要改
        ssl_certificate      cert/whatsit.crt;
        ssl_certificate_key  cert/whatsit.rsa;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   html;
            index  index.html;
            try_files $uri /index.html;
       }
    }

}

Dockerfile:

#使用centos8基礎鏡像
FROM centos:centos8

#從nginx官網上下載nginx
ADD http://nginx.org/download/nginx-1.18.0.tar.gz .

#RUN 執行以下命令
#下載必要的dependency
RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel
#解壓
RUN tar -zxvf nginx-1.18.0.tar.gz
#install
RUN cd nginx-1.18.0 && ./configure --prefix=/usr/local/nginx --with-http_ssl_module && make && make install
RUN ln -s /usr/local/nginx/sbin/* /usr/local/sbin/

#REPLACE CONF 替換配置
COPY dockerConf/nginx.conf /usr/local/nginx/conf/nginx.conf

#ADD RESOUCES 添加靜態資源
COPY build/ /usr/local/nginx/html

#添加證書
COPY dockerConf/whatsit.crt /usr/local/nginx/conf/cert
COPY dockerConf/whatsit.rsa /usr/local/nginx/conf/cert

#CMD 運行以下命令
CMD ["nginx"]

總結

更推薦直接使用方法一，build出來的image體積更小，