摘要：在上已經有接近的數(shù)了，是目前最熱門的前端框架。將整個應用打包發(fā)布，自動試用進行壓縮與優(yōu)化。毫無疑問，這些重擔都將壓在企業(yè)開發(fā)人員身上團隊之間如何高效協(xié)調，快速交付產品，快速部署應用，以及滿足企業(yè)業(yè)務需求，是開發(fā)人員亟需解決的問題。

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

React 實踐項目 （一）
React 實踐項目 （二）
React 實踐項目 （三）
React 實踐項目 （四）
React 實踐項目 （五）

項目到現(xiàn)在麻雀雖小五臟俱全,為了提高我們寫代碼的積極性,自然是選擇部署到服務器上在小伙伴面前秀一波了.部署 React 應用也是非常方便簡單的.

打包應用

我們是用Facebook官方的零配置命令行工具 create-react-app 創(chuàng)建的項目,create-react-app 內置了打包的npm 命令

在命令行里切換到項目目錄,執(zhí)行 npm run build 命令,代碼會被編譯到build目錄。將整個應用打包發(fā)布，自動試用webpack進行壓縮與優(yōu)化。

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

安裝 Nginx

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

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

Docker 是一個開源的應用容器引擎，讓開發(fā)者可以打包他們的應用以及依賴包到一個可移植的容器中，然后發(fā)布到任何流行的 Linux 機器上，也可以實現(xiàn)虛擬化。容器是完全使用沙箱機制，相互之間不會有任何接口。

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

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

docker pull nginx

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

創(chuàng)建 docker-compose.yml

version: "2"
services:
  # 服務名稱
  nginx:
    # 鏡像:版本
    image: nginx:latest 
    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 數(shù)據卷 映射本地文件到容器
    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
    # 覆蓋容器啟動后默認執(zhí)行的命令。
    command: /bin/bash -c "nginx -g "daemon off;""

完成后執(zhí)行 docker-compose up -d 就會自動創(chuàng)建容器并在后臺運行了

常用命令:
docker-compose down 關閉并刪除容器
docker-compose ps 查看容器狀態(tài)
docker-compose exec SERVICE COMMAND 可以用來進入容器內部進行一些操作,
比如 docker-compose exec nginx bash

靜態(tài)資源配置

我們先把打包好的build文件夾上傳至服務器,和docker-compose.yml 放在一起
在 docker-compose.yml 文件已經配置了會把同目錄的 build 文件夾映射到nginx容器的/usr/share/nginx/html文件夾 這個文件夾就是默認的靜態(tài)資源文件夾

配置 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 作為路由管理，在開發(fā)端的express服務器下運行和測試表現(xiàn)均正常，部署到線上的nginx服務器后，還需要對該應用在nginx的配置里作相應調整，否則瀏覽器將不能正常刷新，表現(xiàn)為頁面不顯示或頁面跳轉錯誤等異常。原因在于這些react應用在運行時會更改瀏覽器uri而又不真的希望服務器對這些uri去作響應，如果此時刷新瀏覽器，服務器收到瀏覽器發(fā)來的uri就去尋找資源，這個uri在服務器上是沒有對應資源，結果服務器因找不到資源就發(fā)送403錯誤標志給瀏覽器。所以，我們要做的調整是：瀏覽器在使用這個react應用期間，無論uri更改與否，服務器都發(fā)回index.html這個頁面就行。

創(chuàng)建 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;
        # 其作用是按順序檢查文件是否存在，返回第一個找到的文件或文件夾（結尾加斜線表示為文件夾），如果所有的文件或文件夾都找不到，會進行一個內部重定向到最后一個參數(shù)。
        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

現(xiàn)在我們訪問服務器的80端口就可以看到我們的應用了.比如我的服務器ip為 139.224.135.86 在瀏覽器輸入 http://139.224.135.86 就可以訪問了.