React+Redux|React實(shí)踐項(xiàng)目（三）
React 在網(wǎng)絡(luò)上擁有近 70,000 顆星，是目前最流行的前端框架。而我學(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)目（五）
這次我們將應(yīng)用程序部署到服務(wù)器。
項(xiàng)目雖小，五臟俱全，但為了提高我們寫代碼的積極性，自然而然地選擇部署在服務(wù)器上，在朋友面前炫耀一番。部署 React 應(yīng)用程序也非常方便和簡(jiǎn)單。
我們使用官方提供的零配置命令行工具-react-app創(chuàng)建項(xiàng)目，該工具內(nèi)置了打包好的npm命令
在命令行切換到項(xiàng)目目錄，執(zhí)行npm run build命令，代碼會(huì)被編譯到build目錄下。打包發(fā)布整個(gè)應(yīng)用服務(wù)器運(yùn)維技術(shù)，自動(dòng)試用壓縮優(yōu)化。
如上圖所示，我們的應(yīng)用已經(jīng)打包完成。
Nginx 是一個(gè)高性能的 HTTP 和反向代理服務(wù)器。
在安裝 Nginx 之前，需要引入 .
它是一個(gè)開源的應(yīng)用程序容器引擎，允許開發(fā)者將他們的應(yīng)用程序和依賴包打包到一個(gè)可移植的容器中服務(wù)器運(yùn)維技術(shù)，然后發(fā)布到任何流行的 Linux 機(jī)器上，還可以實(shí)現(xiàn)虛擬化。容器完全使用沙箱機(jī)制，它們之間不會(huì)有任何接口。
云計(jì)算、大數(shù)據(jù)、移動(dòng)技術(shù)的快速發(fā)展，加上企業(yè)業(yè)務(wù)需求的不斷變化，導(dǎo)致需要隨時(shí)改變企業(yè)架構(gòu)以滿足業(yè)務(wù)需求，跟上技術(shù)的步伐。更新。毫無(wú)疑問(wèn)，這些負(fù)擔(dān)將落在企業(yè)開發(fā)者身上；如何在團(tuán)隊(duì)之間高效協(xié)同，快速交付產(chǎn)品，快速部署應(yīng)用，滿足企業(yè)業(yè)務(wù)需求，是開發(fā)者亟待解決的問(wèn)題。技術(shù)恰好可以幫助開發(fā)者解決這些問(wèn)題。
為了解決開發(fā)人員和運(yùn)維人員之間的協(xié)作關(guān)系，加快應(yīng)用交付，越來(lái)越多的企業(yè)引入了這個(gè)概念。但是在傳統(tǒng)的開發(fā)流程中，開發(fā)、測(cè)試、運(yùn)維是三個(gè)獨(dú)立的團(tuán)隊(duì)。團(tuán)隊(duì)之間溝通不順暢，開發(fā)運(yùn)維矛盾時(shí)有發(fā)生，導(dǎo)致協(xié)作效率低下，產(chǎn)品交付延遲。企業(yè)的業(yè)務(wù)運(yùn)作。該技術(shù)以容器的形式將應(yīng)用打包交付，使應(yīng)用可以在不同團(tuán)隊(duì)之間共享，通過(guò)鏡像可以將應(yīng)用部署在任何環(huán)境中。這避免了各個(gè)團(tuán)隊(duì)之間協(xié)作問(wèn)題的出現(xiàn)，成為企業(yè)實(shí)現(xiàn)目標(biāo)的重要工具。以容器的形式交付的技術(shù)，支持持續(xù)的開發(fā)迭代，大大提升了產(chǎn)品開發(fā)和交付的速度。
另外，不同于虛擬機(jī)將底層設(shè)備虛擬化，它直接移植在Linux內(nèi)核上，通過(guò)運(yùn)行Linux進(jìn)程虛擬隔離底層設(shè)備，這樣對(duì)系統(tǒng)性能的損耗遠(yuǎn)低于虛擬機(jī)機(jī)，幾乎可以忽略不計(jì)。同時(shí)，應(yīng)用容器的啟動(dòng)和關(guān)閉非常高效，可以支持大規(guī)模分布式系統(tǒng)的橫向擴(kuò)展，這確實(shí)給企業(yè)發(fā)展帶來(lái)了福音。
簡(jiǎn)而言之，它非常易于使用。它可以安裝在linux mac上。安裝完成后，我們先下載nginx鏡像到本地。
拉 nginx
為了方便使用，我們使用 - 來(lái)管理容器。
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í)行-up -d 會(huì)自動(dòng)創(chuàng)建容器并在后臺(tái)運(yùn)行
常用命令：
- down 關(guān)閉并刪除容器
-ps 查看容器狀態(tài)
- exec可用于進(jìn)入容器執(zhí)行一些操作，
例如 - exec nginx bash
我們先把打包好的build文件夾上傳到服務(wù)器，和-.yml放在一起
-.yml文件已配置將同目錄的build文件夾映射到nginx容器的/usr/share/nginx/html文件夾。這個(gè)文件夾是默認(rèn)的靜態(tài)資源文件夾
nginx鏡像有一個(gè)默認(rèn)的配置文件.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;
#}
}
默認(rèn)配置有問(wèn)題。刷新首頁(yè)以外的路由頁(yè)面時(shí)，會(huì)報(bào)404錯(cuò)誤。
我們使用react-作為路由管理，在開發(fā)服務(wù)器下運(yùn)行測(cè)試性能正常。部署到線上nginx服務(wù)器后，需要在nginx配置中對(duì)應(yīng)用進(jìn)行相應(yīng)的調(diào)整，否則瀏覽器將無(wú)法正常刷新。，表現(xiàn)為頁(yè)面不顯示或頁(yè)面跳轉(zhuǎn)錯(cuò)誤等異常。原因是這些 React 應(yīng)用程序會(huì)在運(yùn)行時(shí)更改瀏覽器 uri，并不真正希望服務(wù)器響應(yīng)這些 uri。如果此時(shí)刷新瀏覽器，服務(wù)器會(huì)在收到瀏覽器發(fā)送的uri后去尋找資源。這個(gè) uri 服務(wù)器上沒(méi)有對(duì)應(yīng)的資源。結(jié)果，服務(wù)器向?yàn)g覽器發(fā)送一個(gè) 403 錯(cuò)誤標(biāo)志，因?yàn)檎也坏劫Y源。因此，我們需要做的調(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; # 其作用是按順序檢查文件是否存在，返回第一個(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; #} }
去掉-.yml中的#-./nginx.conf:/etc/nginx/conf.d/.conf注釋，用nginx.conf覆蓋默認(rèn)配置
docker-compose down docker-compose up -d
現(xiàn)在我們可以通過(guò)訪問(wèn)服務(wù)器的80端口來(lái)查看我們的應(yīng)用了。比如我的服務(wù)器ip是139.224.135.86，在瀏覽器中輸入就可以訪問(wèn)。
售前咨詢專員
