React 在網(wǎng)絡上擁有近 70,000 顆星，是目前最流行的前端框架。而我學習React也有一段時間了，現(xiàn)在開始使用React+Redux進行實戰(zhàn)！

React實踐項目（一）

React實踐項目（二）

React實踐項目（三）

React實踐項目（四）

React實踐項目（五）

這次我們將應用程序部署到服務器。

項目雖小，五臟俱全，但為了提高我們寫代碼的積極性，自然而然地選擇部署在服務器上，在朋友面前炫耀一番。部署 React 應用程序也非常方便和簡單。

我們使用官方提供的零配置命令行工具-react-app創(chuàng)建項目，該工具內(nèi)置了打包好的npm命令

在命令行切換到項目目錄，執(zhí)行npm run build命令，代碼會被編譯到build目錄下。打包發(fā)布整個應用服務器運維技術(shù)，自動試用壓縮優(yōu)化。

如上圖所示，我們的應用已經(jīng)打包完成。

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

在安裝 Nginx 之前，需要引入 .

它是一個開源的應用程序容器引擎，允許開發(fā)者將他們的應用程序和依賴包打包到一個可移植的容器中服務器運維技術(shù)，然后發(fā)布到任何流行的 Linux 機器上，還可以實現(xiàn)虛擬化。容器完全使用沙箱機制，它們之間不會有任何接口。

云計算、大數(shù)據(jù)、移動技術(shù)的快速發(fā)展，加上企業(yè)業(yè)務需求的不斷變化，導致需要隨時改變企業(yè)架構(gòu)以滿足業(yè)務需求，跟上技術(shù)的步伐。更新。毫無疑問，這些負擔將落在企業(yè)開發(fā)者身上；如何在團隊之間高效協(xié)同，快速交付產(chǎn)品，快速部署應用，滿足企業(yè)業(yè)務需求，是開發(fā)者亟待解決的問題。技術(shù)恰好可以幫助開發(fā)者解決這些問題。

為了解決開發(fā)人員和運維人員之間的協(xié)作關(guān)系，加快應用交付，越來越多的企業(yè)引入了這個概念。但是在傳統(tǒng)的開發(fā)流程中，開發(fā)、測試、運維是三個獨立的團隊。團隊之間溝通不順暢，開發(fā)運維矛盾時有發(fā)生，導致協(xié)作效率低下，產(chǎn)品交付延遲。企業(yè)的業(yè)務運作。該技術(shù)以容器的形式將應用打包交付，使應用可以在不同團隊之間共享，通過鏡像可以將應用部署在任何環(huán)境中。這避免了各個團隊之間協(xié)作問題的出現(xiàn)，成為企業(yè)實現(xiàn)目標的重要工具。以容器的形式交付的技術(shù)，支持持續(xù)的開發(fā)迭代，大大提升了產(chǎn)品開發(fā)和交付的速度。

另外，不同于虛擬機將底層設(shè)備虛擬化，它直接移植在Linux內(nèi)核上，通過運行Linux進程虛擬隔離底層設(shè)備，這樣對系統(tǒng)性能的損耗遠低于虛擬機機，幾乎可以忽略不計。同時，應用容器的啟動和關(guān)閉非常高效，可以支持大規(guī)模分布式系統(tǒng)的橫向擴展，這確實給企業(yè)發(fā)展帶來了福音。

簡而言之，它非常易于使用。它可以安裝在linux mac上。安裝完成后，我們先下載nginx鏡像到本地。

拉 nginx

為了方便使用，我們使用 - 來管理容器。

version: '2'
services:
  # 服務名稱
  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
    # 覆蓋容器啟動后默認執(zhí)行的命令。
    command: /bin/bash -c "nginx -g 'daemon off;'"

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

常用命令：

- down 關(guān)閉并刪除容器

-ps 查看容器狀態(tài)

- exec可用于進入容器執(zhí)行一些操作，

例如 - exec nginx bash

我們先把打包好的build文件夾上傳到服務器，和-.yml放在一起

-.yml文件已配置將同目錄的build文件夾映射到nginx容器的/usr/share/nginx/html文件夾。這個文件夾是默認的靜態(tài)資源文件夾

nginx鏡像有一個默認的配置文件.conf

.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-作為路由管理，在開發(fā)服務器下運行測試性能正常。部署到線上nginx服務器后，需要在nginx配置中對應用進行相應的調(diào)整，否則瀏覽器將無法正常刷新。，表現(xiàn)為頁面不顯示或頁面跳轉(zhuǎn)錯誤等異常。原因是這些 React 應用程序會在運行時更改瀏覽器 uri，并不真正希望服務器響應這些 uri。如果此時刷新瀏覽器，服務器會在收到瀏覽器發(fā)送的uri后去尋找資源。這個 uri 服務器上沒有對應的資源。結(jié)果，服務器向瀏覽器發(fā)送一個 403 錯誤標志，因為找不到資源。因此，我們需要做的調(diào)整是：

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

去掉-.yml中的#-./nginx.conf:/etc/nginx/conf.d/.conf注釋，用nginx.conf覆蓋默認配置

docker-compose down
docker-compose up -d

現(xiàn)在我們可以通過訪問服務器的80端口來查看我們的應用了。比如我的服務器ip是139.224.135.86，在瀏覽器中輸入就可以訪問。