Docker+Nginx發布react

本文介紹Centos8發布React流程

安裝Docker以及Nginx流程本文不做介紹，可以查看：

linux安裝nginx

Linux安裝Docker

1.React項目打包:

以VSCode開發工具為例，新建終端，並運行`npm run build`命令

等待執行完畢后會在項目根目錄出現dist文件夾，上傳dist文件夾到linux服務器。

在自己的電腦上新建一個Dockerfile文件，沒有后綴名。添加如下代碼配置:

# 設置基礎鏡像
FROM nginx:alpine
將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
 COPY . /usr/share/nginx/html/

把Dockerfile文件上傳到剛剛的dist文件夾中

執行命令切換到dist目錄:

cd /app/dist

創建容器:

docker build -t 容器名 .    //.一點要有

創建容器鏡像:

docker run --name=reactdocker -p 8036:80 -d reactdocker    //--name ：指定容器名稱。 --p ：指定容器端口。--d ：指定容器后台運行。

之后在輸入`curl localhost:8036`指令查看鏡像是否運行成功:

出現如上前端代碼塊代表成功!

2.配置Nginx:

執行指令`cd /usr/local`切換到local文件夾

繼續執行`vi /usr/local/nginx/conf/nginx.conf`打開nginx配置文件

在文件中找到server節點,之后進行如下配置:

server { 

listen 9111; #監聽9111端口 

server_name localhost; 

client_max_body_size 10m; #請求最大字節限制 

proxy_connect_timeout 300;#代理連接超時時間 

proxy_read_timeout 300;#代理接收超時時間 

location / {

root /app/dist;#前端文件夾路徑

index index.html,index.htm;#初始頁面

proxy_pass http://localhost:8036;#未攜帶api代表前端訪問，9111重定向到8036，8036端口指前端發布到服務器的端口

try_files $uri $uri/ /index.html;

}

location /api {

proxy_pass http://localhost:8003;#攜帶api代表訪問后端，9111重定向到8003，8003端口指后端發布到服務器的端口

} 

#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 html;

}

此配置包含前后端!

需要注意的是這里!

root后面跟的是前端dist文件夾的路徑，注意修改！

配置好之后執行

/usr/local/nginx/sbin/nginx -s reload

指令重啟nginx

配置好之后執行指令,

curl localhost:9111

如出現和

curl localhost:8036

同樣的代碼塊，即為成功。之后開啟服務器外網端口9111，就可以通過外網訪問了！