React 實踐項目 （五）Docker Nginx 部署 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 就能夠訪問了.