React 實踐項目 （五）

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進行壓縮與優化。

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

• 安裝 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 就可以訪問了.