前端項目線上環(huán)境搭建(Nginx)和線上部署(推薦)

本次主要講解的是服務(wù)器上node環(huán)境的搭建，以及vue/react/等的項目的部署，作為一名前端，一定要學(xué)會哦。

購買云服務(wù)器/主機(jī)

云服務(wù)器：阿里云、百度云、新浪云、騰訊云

主機(jī)：不建議購買，共享的不穩(wěn)定

我下面的案例用10幾塊的渣渣云服務(wù)器進(jìn)行演示，因為便宜，但我不推薦你們用

購買域名，進(jìn)行備案

這個步驟可以不需要先進(jìn)行，有了服務(wù)器有公網(wǎng)ip也可以訪問，域名后面講

遠(yuǎn)程連接

1. 阿里云等服務(wù)器網(wǎng)頁自帶的 ， 輸入遠(yuǎn)程連接密碼

2.通過ssh客戶端連接(推薦)

由于我用的Mac，所以我就用Termius演示吧，windows的話推薦putty等ssh工具，搜索關(guān)鍵詞windows常用ssh

如圖上只需要address(公網(wǎng)ip)和port(ssh端口號)，這里有必要聲明一下：

云服務(wù)器回默認(rèn)22為ssh端口號

共享云主機(jī)分配給你ip一般就是ssh端口號

連接成功后如下：

安裝node

如何從EPEL庫安裝Node.js 另一個有效且簡單的方法來安裝Node.js就是從官方庫。這同樣確保您可以訪問到EPEL庫， 你可以通過運(yùn)行以下命令。 sudo yum install epel-release 現(xiàn)在可以使用yum命令安裝Node.js了。 sudo yum install nodejs 因為在開發(fā)過程中我需要管理節(jié)點(diǎn)包，我還要安裝新公共管理的軟件包管理器， 使用以下命令。 sudo yum install npm whereis node

三條安裝命令， 中間有提示yes/no的一律按y,帶寬小的耐心等待安裝

安裝成功后執(zhí)行where is node 如下，表明已經(jīng)安裝成功

配置安全組

云服務(wù)器的話可以配置，云主機(jī)的話一般不給配置，這個根據(jù)需求來配置，一般我都是配置

1. 端口范圍 1/60000 2. 授權(quán)對象： 0.0.0.0/0

我不建議大家這樣配置 ，安全組顧名思義為了安全，所以端口應(yīng)該開放的越少越好，例如你要用8080端口那么給個8080就好了

當(dāng)然也有的是給你配置防火墻的，如果你的端口不能用，請查看安全組或者防火墻有沒有打開你要用的端口

這里的演示暫且跳過，上圖大家想必能看懂，就是配置了幾個端口。

測試是否可用

我們測試上傳一個server.js看看，先做如下準(zhǔn)備工作：

文件上傳的話我們推薦xftp或者xshell等ftp工具

我用FileZilla演示，界面都差不多的，首先我們連接到服務(wù)器：

這個就是協(xié)議不對了，我們修改下連接協(xié)議

修改成sftp協(xié)議后點(diǎn)擊連接

如上連接成功！

既然連接成功那我們寫個簡單的接口：

// 導(dǎo)入http模塊: var http = require('http'); // 創(chuàng)建http server，并傳入回調(diào)函數(shù): var server = http.createServer(function (request, response) { // 回調(diào)函數(shù)接收request和response對象, // 獲得HTTP請求的method和url: console.log(request.method + ': ' + request.url); // 將HTTP響應(yīng)200寫入response, 同時設(shè)置Content-Type: text/html: response.writeHead(200, {'Content-Type': 'text/html'}); // 將HTTP響應(yīng)的HTML內(nèi)容寫入response: response.end('Hello world!'); }); // 讓服務(wù)器監(jiān)聽8080端口: server.listen(8089); console.log('Server is running at http://127.0.0.1:8089/');

這條接口本地可以運(yùn)行，那么我們再用ftp工具上傳到服務(wù)器

再用ssh工具運(yùn)行

運(yùn)行后我們打開站點(diǎn)，ip:端口，發(fā)現(xiàn)無法訪問

這時我們?nèi)z測下端口號(在線端口檢測,端口掃描,端口開放檢查-在線工具-postjson)的開放情況，發(fā)現(xiàn)如下圖，22是開放的，8089是關(guān)閉的，這也就是為什么我們ssh和ftp能通過22端口連接，8089不能訪問站點(diǎn)的原因了，那么我們就得打開端口了，方式前面提到過，就是安全組和防火墻，開啟就行當(dāng)然也可以通過命令打開，下面我用命令打開端口

命令行控制防火墻

//打開8000-9000端口，成功返回success firewall-cmd --zone=public --add-port=8000-9000/udp --permanen //打開8089端口，成功返回success firewall-cmd --zone=public --add-port=8089/tcp --permanent //重啟防火墻，成功返回success firewall-cmd --reload //檢測是否打開端口，成功打開返回yes firewall-cmd --zone=public --query-port=8089/tcp

執(zhí)行了上述操作后，可以看到已經(jīng)可以訪問了

添加負(fù)載均衡（pm2）

你看我們是啟動了這個測試案例，可是如果服務(wù)器重啟，那么案例就直接結(jié)束了，這是相當(dāng)不對的。所以我們需要負(fù)載均衡，即用就掛起服務(wù)。

npm i pm2 -g 全局安裝pm2 pm2 start app.js 后臺掛起服務(wù) pm2 list 查看后臺掛起所有服務(wù) pm2 stop id 根據(jù)服務(wù)id 停止當(dāng)前服務(wù) pm2 delete id 根據(jù)服務(wù) id 刪除當(dāng)前服務(wù) pm2 restart id 重啟服務(wù)

安裝后報錯，是node和npm的版本問題，解決方法就是升級版本，但實(shí)現(xiàn)的辦法不止一種，下面為其一：

執(zhí)行下面的 命令

sudo npm install -g n # 最新版本 n lastest # 穩(wěn)定版本 n stable # 安裝指定版本 n 10.12.0

執(zhí)行pm2 list，如下說明成功

pm2安裝好了，我們再來通過pm2啟動測試案例：

pm2 start后再執(zhí)行兩條命令

使用pm2 start （啟動服務(wù)) --- 上面我們執(zhí)行了 執(zhí)行pm2 save (保存當(dāng)前已經(jīng)啟動了的服務(wù)) 執(zhí)行pm2 startup (設(shè)置開機(jī)自啟的配置)

設(shè)置開機(jī)自啟成功！重啟服務(wù)器看下，loading....啟動成功！

pm2開機(jī)自啟到此已經(jīng)成功了！

安裝MongoDB

MongoDB 是一個介于關(guān)系數(shù)據(jù)庫和非關(guān)系數(shù)據(jù)庫之間的產(chǎn)品，是非關(guān)系數(shù)據(jù)庫當(dāng)中功能最豐富，最像關(guān)系數(shù)據(jù)庫的。他支持的數(shù)據(jù)結(jié)構(gòu)非常松散，是類似json的bson格式，因此可以存儲比較復(fù)雜的數(shù)據(jù)類型。Mongo最大的特點(diǎn)是他支持的查詢語言非常強(qiáng)大，其語法有點(diǎn)類似于面向?qū)ο蟮牟樵冋Z言，幾乎可以實(shí)現(xiàn)類似關(guān)系數(shù)據(jù)庫單表查詢的絕大部分功能，而且還支持對數(shù)據(jù)建立索引。

Packages包說明

MongoDB官方源中包含以下幾個依賴包：

mongodb-org: MongoDB元數(shù)據(jù)包，安裝時自動安裝下面四個組件包：

1.mongodb-org-server: 包含MongoDB守護(hù)進(jìn)程和相關(guān)的配置和初始化腳本。

2.mongodb-org-mongos: 包含mongos的守護(hù)進(jìn)程。

3.mongodb-org-shell: 包含mongo shell。

4.mongodb-org-tools: 包含MongoDB的工具： mongoimport, bsondump, mongodump, mongoexport, mongofiles, mongooplog, mongoperf, mongorestore, mongostat, and mongotop。

安裝mongodb過程中注意以下幾個知識點(diǎn)

1. vim命令基本使用 1. vim a.txt 2. 先按鍵盤的 i 3. 寫入內(nèi)容 （shift + ins） 4. 退出 先按 ESC 鍵 5. 再打 **: wq** 會出即可保存并退出 2. 注意點(diǎn)： 防火墻忽略

1.配置MongoDB的yum源

創(chuàng)建yum源文件：

vi /etc/yum.repos.d/mongodb-org-3.4.repo

添加以下內(nèi)容：

[mongodb-org-3.4] name=MongoDB Repository baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/ gpgcheck=1 enabled=1 gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

這里可以修改 gpgcheck=0, 省去gpg驗證

安裝之前先更新所有包 ：yum update （可選操作）

2.安裝mongodb

安裝命令

yum -y install mongodb-org

安裝完成后

查看mongo安裝位置 whereis mongod

查看修改配置文件 ： vim /etc/mongod.conf

3.啟動MongoDB

啟動mongodb ：systemctl start mongod.service

停止mongodb ：systemctl stop mongod.service

查到mongodb的狀態(tài)：systemctl status mongod.service

4.設(shè)置開機(jī)啟動

設(shè)置開機(jī)啟動 ：systemctl enable mongod.service

5.啟動mongodb

啟動：mongo shell

6.設(shè)置mongodb遠(yuǎn)程訪問

注意先打開27017端口，前面有講怎么打開

重啟mongodb：systemctl restart mongod.service

nginx安裝 /配置

Nginx 是 C語言 開發(fā)，建議在 Linux 上運(yùn)行，當(dāng)然，也可以安裝 Windows 版本，本篇則使用 [CentOS](https://www.linuxidc.com/topicnews.aspx?tid=14) 7 作為安裝環(huán)境。

1.gcc 安裝

安裝 nginx 需要先將官網(wǎng)下載的源碼進(jìn)行編譯，編譯依賴 gcc 環(huán)境，如果沒有 gcc 環(huán)境，則需要安裝：

yum install gcc-c++

2.PCRE pcre-devel 安裝

PCRE(Perl Compatible Regular Expressions) 是一個Perl庫，包括 perl 兼容的正則表達(dá)式庫。nginx 的 http 模塊使用 pcre 來解析正則表達(dá)式，所以需要在 linux 上安裝 pcre 庫，pcre-devel 是使用 pcre 開發(fā)的一個二次開發(fā)庫。nginx也需要此庫。命令：

yum install -y pcre pcre-devel

3.zlib 安裝

zlib 庫提供了很多種壓縮和解壓縮的方式， nginx 使用 zlib 對 http 包的內(nèi)容進(jìn)行 gzip ，所以需要在 Centos 上安裝 zlib 庫。

yum install -y zlib zlib-devel

4.OpenSSL 安裝

OpenSSL 是一個強(qiáng)大的安全套接字層密碼庫，囊括主要的密碼算法、常用的密鑰和證書封裝管理功能及 SSL 協(xié)議，并提供豐富的應(yīng)用程序供測試或其它目的使用。

nginx 不僅支持 http 協(xié)議，還支持 https（即在ssl協(xié)議上傳輸http），所以需要在 Centos 安裝 OpenSSL 庫。

yum install -y openssl openssl-devel

5.下載nginx

官網(wǎng)下載nginx: download

使用`wget`命令下載：

wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

兩種方式下哪個版本看自己需求，盡量用穩(wěn)定版。

6.解壓：

tar -zxvf nginx-1.10.1.tar.gz cd nginx-1.10.1

7.配置：

其實(shí)在 nginx-1.10.1 版本中你就不需要去配置相關(guān)東西，默認(rèn)就可以了。當(dāng)然，如果你要自己配置目錄也是可以的。

1.使用默認(rèn)配置

./configure

2.自定義配置（不推薦）

+ ./configure \ --prefix=/usr/local/nginx \ --conf-path=/usr/local/nginx/conf/nginx.conf \ --pid-path=/usr/local/nginx/conf/nginx.pid \ --lock-path=/var/lock/nginx.lock \ --error-log-path=/var/log/nginx/error.log \ --http-log-path=/var/log/nginx/access.log \ --with-http_gzip_static_module \ --http-client-body-temp-path=/var/temp/nginx/client \ --http-proxy-temp-path=/var/temp/nginx/proxy \ --http-fastcgi-temp-path=/var/temp/nginx/fastcgi \ --http-uwsgi-temp-path=/var/temp/nginx/uwsgi \ --http-scgi-temp-path=/var/temp/nginx/scgi

注：將臨時文件目錄指定為/var/temp/nginx，需要在/var下創(chuàng)建temp及nginx目錄

3.配置https支持的ssl模塊

./configure --prefix=/usr/local/nginx --with-http_ssl_module

8.編譯安裝

make make install

9.查找安裝路徑

whereis nginx

10.啟動、停止nginx

cd /usr/local/nginx/sbin/ ./nginx ./nginx -s stop ./nginx -s quit ./nginx -s reload

`./nginx -s quit`:此方式停止步驟是待nginx進(jìn)程處理任務(wù)完畢進(jìn)行停止。

`./nginx -s stop`:此方式相當(dāng)于先查出nginx進(jìn)程id再使用kill命令強(qiáng)制殺掉進(jìn)程

查詢nginx進(jìn)程：

ps aux|grep nginx

11.重啟 nginx

1.先停止再啟動（推薦）：

對 nginx 進(jìn)行重啟相當(dāng)于先停止再啟動，即先執(zhí)行停止命令再執(zhí)行啟動命令。如下：

./nginx -s quit ./nginx

2.重新加載配置文件：

當(dāng) ngin x的配置文件 nginx.conf 修改后，要想讓配置生效需要重啟 nginx，使用`-s reload`不用先? ?停止 ngin x再啟動 nginx 即可將配置信息在 nginx 中生效，如下：

./nginx -s reload

以上的步驟執(zhí)行完后，瀏覽器輸入公網(wǎng)ip

看到這個，就代表著nginx配置上去了！

12.開機(jī)自啟動

vi /etc/rc.local

增加一行：/usr/local/nginx/sbin/nginx

設(shè)置執(zhí)行權(quán)限：

chmod 755 /etc/rc.local

到這里，nginx就安裝完畢了，啟動、停止、重啟操作也都完成了，當(dāng)然，你也可以添加為系統(tǒng)服務(wù)，我這里就不在演示了。

就重啟看下！

ok了，如果出不來記得開放80端口！

nginx靜態(tài)服務(wù)器 \ 反向代理

我們先上傳一個項目，將項目build后的文件

在 /usr/local/nginx/conf/nginx.conf ?中修改如下配置:

server { listen 80; server_name localhost; location / { root html/amap-use; try_files $uri /index.html; #解決路由重定向跳轉(zhuǎn) 404 頁面配置 index index.html index.htm; } }

指向到我們剛剛上傳的文件！

再打開瀏覽器輸入 公網(wǎng)ip

成功了！

再來看反向代理

例如我們的vue項目，在vue.config.js里配置了反向代理，本地可用發(fā)布后獲取不到數(shù)據(jù)。這個時候我們要配置nignx反向代理

server { listen 80; server_name localhost; location / { root html/amap-use; try_files $uri /index.html; #解決路由重定向跳轉(zhuǎn) 404 頁面配置 index index.html index.htm; } location /marketing { # 解決反向代理數(shù)據(jù)獲取不到 proxy_pass https://resource.smartisan.com/marketing; } location /product { proxy_pass https://www.smartisan.com/product; } }

多項目配置多個端口

解決： 在nginx配置文件中添加多個 server配置， 但是要注意 ?項目文件夾要和 nginx /html目錄同級

目錄應(yīng)該如下：

nginx html vue-project react-project

在 /usr/local/nginx/conf/nginx.conf ?中修改如下配置:

server { #此2為默認(rèn)端口設(shè)置 listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root project_list; 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 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; #} } server { listen 10002; server_name localhost; location / { root zmh_react_project; try_files $uri /index.html; #解決路由重定向跳轉(zhuǎn) 404 頁面配置 index index.html; } location /marketing { # 解決反向代理數(shù)據(jù)獲取不到 proxy_pass https://resource.smartisan.com/marketing; } location /product { proxy_pass https://www.smartisan.com/product; } } server { listen 10001; server_name localhost; location / { root zmh_react_project; try_files $uri /index.html; #解決路由重定向跳轉(zhuǎn) 404 頁面配置 index index.html; } location /marketing { # 解決反向代理數(shù)據(jù)獲取不到 proxy_pass https://resource.smartisan.com/marketing; } location /product { proxy_pass https://www.smartisan.com/product; } }

各位在配置過程中可能會遇到的問題

1.瀏覽器ip打不開

原因可能如下

端口未開放，靜態(tài)資源指向錯誤等

卡住可以私信我，看到幫你處理，謝謝大家。

2.如果你是測試的話建議可以把防火墻關(guān)了，或者打開所有端口，因為你會經(jīng)常忘了自己沒開放打開端口

HTTP Nginx web前端 彈性云服務(wù)器 ECS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。