React 實踐專案 （五）Docker Nginx 部署 React

Yuicon發表於2017-07-30
ReactDockerNginx

React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Redux 進行實戰！

React 實踐專案 （一）
React 實踐專案 （二）
React 實踐專案 （三）
React 實踐專案 （四）
React 實踐專案 （五）

這次我們把應用部署到伺服器上.

專案到現在麻雀雖小五臟俱全,為了提高我們寫程式碼的積極性,自然是選擇部署到伺服器上在小夥伴面前秀一波了.部署 React 應用也是非常方便簡單的.

  • 打包應用

我們是用Facebook官方的零配置命令列工具 create-react-app 建立的專案,create-react-app 內建了打包的npm 命令

在命令列裡切換到專案目錄,執行 npm run build 命令,程式碼會被編譯到build目錄。將整個應用打包釋出，自動試用webpack進行壓縮與優化。

tim 20170730103905

如上圖所示,我們的應用已經打包完畢.

  • 安裝 Nginx

Nginx 是一個高效能的HTTP和反向代理伺服器.

在安裝Nginx前需要先介紹下 Docker.

Docker 是一個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到一個可移植的容器中，然後釋出到任何流行的 Linux 機器上，也可以實現虛擬化。容器是完全使用沙箱機制，相互之間不會有任何介面。

雲端計算、大資料，移動技術的快速發展，加之企業業務需求的不斷變化，導致企業架構要隨時更改以適合業務需求，跟上技術更新的步伐。毫無疑問，這些重擔都將壓在企業開發人員身上；團隊之間如何高效協調，快速交付產品，快速部署應用，以及滿足企業業務需求，是開發人員亟需解決的問題。Docker技術恰好可以幫助開發人員解決這些問題。
為了解決開發人員和運維人員之間的協作關係，加快應用交付速度，越來越多的企業引入了DevOps這一概念。但是，傳統的開發過程中，開發、測試、運維是三個獨立運作的團隊，團隊之間溝通不暢，開發運維之間衝突時有發生，導致協作效率低下，產品交付延遲， 影響了企業的業務執行。Docker技術將應用以集裝箱的方式打包交付，使應用在不同的團隊中共享，通過映象的方式應用可以部署於任何環境中。這樣避免了各團隊之間的協作問題的出現，成為企業實現DevOps目標的重要工具。以容器方式交付的Docker技術支援不斷地開發迭代，大大提升了產品開發和交付速度。
此外，與通過Hypervisor把底層裝置虛擬化的虛擬機器不同，Docker直接移植於Linux核心之上，通過執行Linux程式將底層裝置虛擬隔離，這樣系統效能的損耗也要比虛擬機器低的多，幾乎可以忽略。同時，Docker應用容器的啟停非常高效，可以支援大規模的分佈系統的水平擴充套件，真正給企業開發帶來福音。

總之就是非常好用, linux windows mac上都可以安裝,docker安裝完成後我們先把nginx映象下載到本地.

docker pull nginx

為了使用方便,我們用 docker-compose 管理容器.

  • 建立 docker-compose.yml
version: `2`
services:
  # 服務名稱
  nginx:
    # 映象:版本
    image: nginx:latest 
    # 對映容器80埠到本地80埠
    ports:
     - "80:80"
    # 資料卷 對映本地檔案到容器
    volumes:
    # 對映nginx.conf檔案到容器的/etc/nginx/conf.d目錄並覆蓋default.conf檔案
    # - ./nginx.conf:/etc/nginx/conf.d/default.conf
    # 對映build資料夾到容器的/usr/share/nginx/html資料夾
     - ./build:/usr/share/nginx/html
    # 覆蓋容器啟動後預設執行的命令。
    command: /bin/bash -c "nginx -g `daemon off;`"

完成後執行 docker-compose up -d 就會自動建立容器並在後臺執行了

常用命令:
docker-compose down 關閉並刪除容器
docker-compose ps 檢視容器狀態
docker-compose exec SERVICE COMMAND 可以用來進入容器內部進行一些操作,
比如 docker-compose exec nginx bash

  • 靜態資源配置

我們先把打包好的build資料夾上傳至伺服器,和docker-compose.yml 放在一起
在 docker-compose.yml 檔案已經配置了會把同目錄的 build 資料夾對映到nginx容器的/usr/share/nginx/html資料夾 這個資料夾就是預設的靜態資原始檔夾

  • 配置 Nginx

nginx映象有一個預設的配置檔案 default.conf

default.conf

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        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;
    #}
}

預設的配置有一個問題, 在非首頁的路由頁面重新整理就會報404錯誤
我們使用 react-router 作為路由管理，在開發端的express伺服器下執行和測試表現均正常，部署到線上的nginx伺服器後，還需要對該應用在nginx的配置裡作相應調整，否則瀏覽器將不能正常重新整理，表現為頁面不顯示或頁面跳轉錯誤等異常。原因在於這些react應用在執行時會更改瀏覽器uri而又不真的希望伺服器對這些uri去作響應，如果此時重新整理瀏覽器，伺服器收到瀏覽器發來的uri就去尋找資源，這個uri在伺服器上是沒有對應資源，結果伺服器因找不到資源就傳送403錯誤標誌給瀏覽器。所以，我們要做的調整是：瀏覽器在使用這個react應用期間，無論uri更改與否，伺服器都發回index.html這個頁面就行。

建立 nginx.conf 檔案

# gzip設定
gzip on;
gzip_vary on;

gzip_comp_level 6;
gzip_buffers 16 8k;

gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";
#gzip_http_version 1.0;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 其作用是按順序檢查檔案是否存在，返回第一個找到的檔案或資料夾（結尾加斜線表示為資料夾），如果所有的檔案或資料夾都找不到，會進行一個內部重定向到最後一個引數。
        try_files $uri /index.html;
    }

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

將 docker-compose.yml 裡的 # - ./nginx.conf:/etc/nginx/conf.d/default.conf 註釋去掉 用nginx.conf覆蓋預設的配置

docker-compose down
docker-compose up -d

現在我們訪問伺服器的80埠就可以看到我們的應用了.比如我的伺服器ip為 139.224.135.86 在瀏覽器輸入 http://139.224.135.86 就可以訪問了.

相關文章