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

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

React 實(shí)踐項(xiàng)目 （一）
React 實(shí)踐項(xiàng)目 （二）
React 實(shí)踐項(xiàng)目 （三）
React 實(shí)踐項(xiàng)目 （四）
React 實(shí)踐項(xiàng)目 （五）

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

打包應(yīng)用

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

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

如上圖所示,我們的應(yīng)用已經(jīng)打包完畢.

安裝 Nginx

Nginx 是一個(gè)高性能的HTTP和反向代理服務(wù)器.

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

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

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

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

docker pull nginx

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

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

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

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

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

靜態(tài)資源配置

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

配置 Nginx

nginx鏡像有一個(gè)默認(rèn)的配置文件 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;
    #}
}

默認(rèn)的配置有一個(gè)問題, 在非首頁的路由頁面刷新就會(huì)報(bào)404錯(cuò)誤
我們使用 react-router 作為路由管理，在開發(fā)端的express服務(wù)器下運(yùn)行和測試表現(xiàn)均正常，部署到線上的nginx服務(wù)器后，還需要對該應(yīng)用在nginx的配置里作相應(yīng)調(diào)整，否則瀏覽器將不能正常刷新，表現(xiàn)為頁面不顯示或頁面跳轉(zhuǎn)錯(cuò)誤等異常。原因在于這些react應(yīng)用在運(yùn)行時(shí)會(huì)更改瀏覽器uri而又不真的希望服務(wù)器對這些uri去作響應(yīng)，如果此時(shí)刷新瀏覽器，服務(wù)器收到瀏覽器發(fā)來的uri就去尋找資源，這個(gè)uri在服務(wù)器上是沒有對應(yīng)資源，結(jié)果服務(wù)器因找不到資源就發(fā)送403錯(cuò)誤標(biāo)志給瀏覽器。所以，我們要做的調(diào)整是：瀏覽器在使用這個(gè)react應(yīng)用期間，無論uri更改與否，服務(wù)器都發(fā)回index.html這個(gè)頁面就行。

創(chuàng)建 nginx.conf 文件

# gzip設(shè)置
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;
        # 其作用是按順序檢查文件是否存在，返回第一個(gè)找到的文件或文件夾（結(jié)尾加斜線表示為文件夾），如果所有的文件或文件夾都找不到，會(huì)進(jìn)行一個(gè)內(nèi)部重定向到最后一個(gè)參數(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覆蓋默認(rèn)的配置

docker-compose down
docker-compose up -d

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