本次主要講解的是服務器上node環境的搭建，以及vue/react/等的專案的部署，作為一名前端，一定要學會哦，
購買云服務器/主機
云服務器：阿里云、百度云、新浪云、騰訊云
主機：不建議購買，共享的不穩定
我下面的案例用10幾塊的渣渣云服務器進行演示，因為便宜，但我不推薦你們用
購買域名，進行備案
這個步驟可以不需要先進行，有了服務器有公網ip也可以訪問，域名后面講
遠程連接
1. 阿里云等服務器網頁自帶的 ， 輸入遠程連接密碼
2.通過ssh客戶端連接(推薦)
由于我用的Mac，所以我就用Termius演示吧，windows的話推薦putty等ssh工具，搜索關鍵詞windows常用ssh
如圖上只需要address(公網ip)和port(ssh埠號)，這里有必要宣告一下：
- 云服務器回默認22為ssh埠號
- 共享云主機分配給你ip一般就是ssh埠號
連接成功后如下：
安裝node
如何從EPEL庫安裝Node.js
另一個有效且簡單的方法來安裝Node.js就是從官方庫，這同樣確保您可以訪問到EPEL庫，
你可以通過運行以下命令，
sudo yum install epel-release
現在可以使用yum命令安裝Node.js了，
sudo yum install nodejs
因為在開發程序中我需要管理節點包，我還要安裝新公共管理的軟體包管理器，
使用以下命令，
sudo yum install npm
whereis node 三條安裝命令， 中間有提示yes/no的一律按y,帶寬小的耐心等待安裝
安裝成功后執行where is node 如下，表明已經安裝成功
配置安全組
云服務器的話可以配置，云主機的話一般不給配置，這個根據需求來配置，一般我都是配置
1. 埠范圍 1/60000
2. 授權物件： 0.0.0.0/0我不建議大家這樣配置 ，安全組顧名思義為了安全，所以埠應該開放的越少越好，例如你要用8080埠那么給個8080就好了
當然也有的是給你配置防火墻的，如果你的埠不能用，請查看安全組或者防火墻有沒有打開你要用的埠
這里的演示暫且跳過，上圖大家想必能看懂，就是配置了幾個埠，
測驗是否可用
我們測驗上傳一個server.js看看，先做如下準備作業：
檔案上傳的話我們推薦xftp或者xshell等ftp工具
我用FileZilla演示，界面都差不多的，首先我們連接到服務器：
這個就是協議不對了，我們修改下連接協議
修改成sftp協議后點擊連接
如上連接成功！
既然連接成功那我們寫個簡單的介面：
// 匯入http模塊:
var http = require('http');
// 創建http server，并傳入回呼函式:
var server = http.createServer(function (request, response) {
// 回呼函式接收request和response物件,
// 獲得HTTP請求的method和url:
console.log(request.method + ': ' + request.url);
// 將HTTP回應200寫入response, 同時設定Content-Type: text/html:
response.writeHead(200, {'Content-Type': 'text/html'});
// 將HTTP回應的HTML內容寫入response:
response.end('Hello world!');
});
// 讓服務器監聽8080埠:
server.listen(8089);
console.log('Server is running at http://127.0.0.1:8089/'); 
這條介面本地可以運行，那么我們再用ftp工具上傳到服務器
再用ssh工具運行
運行后我們打開站點，ip:埠，發現無法訪問
這時我們去檢測下埠號(http://coolaf.com/tool/port)的開放情況，發現如下圖，22是開放的，8089是關閉的，這也就是為什么我們ssh和ftp能通過22埠連接，8089不能訪問站點的原因了，那么我們就得打開埠了，方式前面提到過，就是安全組和防火墻，開啟就行當然也可以通過命令打開，下面我用命令打開埠
命令列控制防火墻
//打開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執行了上述操作后，可以看到已經可以訪問了
添加負載均衡（pm2）
你看我們是啟動了這個測驗案例，可是如果服務器重啟，那么案例就直接結束了，這是相當不對的，所以我們需要負載均衡，即用就掛起服務，
npm i pm2 -g 全域安裝pm2
pm2 start app.js 后臺掛起服務
pm2 list 查看后臺掛起所有服務
pm2 stop id 根據服務id 停止當前服務
pm2 delete id 根據服務 id 洗掉當前服務
pm2 restart id 重啟服務 安裝后報錯，是node和npm的版本問題
執行下面的 命令
sudo npm install -g n
# 最新版本
n lastest
# 穩定版本
n stable
# 安裝指定版本
n 10.12.0執行pm2 list，如下說明成功
pm2安裝好了，我們再來通過pm2啟動測驗案例：
pm2 start后再執行兩條命令
使用pm2 start （啟動服務) --- 上面我們執行了
執行pm2 save (保存當前已經啟動了的服務)
執行pm2 startup (設定開機自啟的配置)設定開機自啟成功！重啟服務器看下，loading....啟動成功！
pm2開機自啟到此已經成功了！
安裝MongoDB
MongoDB 是一個介于關系資料庫和非關系資料庫之間的產品，是非關系資料庫當中功能最豐富，最像關系資料庫的，他支持的資料結構非常松散，是類似json的bson格式，因此可以存盤比較復雜的資料型別，Mongo最大的特點是他支持的查詢語言非常強大，其語法有點類似于面向物件的查詢語言，幾乎可以實作類似關系資料庫單表查詢的絕大部分功能，而且還支持對資料建立索引，
Packages包說明
MongoDB官方源中包含以下幾個依賴包：
mongodb-org: MongoDB元資料包，安裝時自動安裝下面四個組件包：
1.mongodb-org-server: 包含MongoDB守護行程和相關的配置和初始化腳本，
2.mongodb-org-mongos: 包含mongos的守護行程，
3.mongodb-org-shell: 包含mongo shell，
4.mongodb-org-tools: 包含MongoDB的工具： mongoimport, bsondump, mongodump, mongoexport, mongofiles, mongooplog, mongoperf, mongorestore, mongostat, and mongotop，
安裝mongodb程序中注意以下幾個知識點
1. vim命令基本使用
1. vim a.txt
2. 先按鍵盤的 i
3. 寫入內容 （shift + ins）
4. 退出 先按 ESC 鍵
5. 再打 **: wq** 會出即可保存并退出
2. 注意點： 防火墻忽略1.配置MongoDB的yum源
創建yum源檔案：
vi /etc/yum.repos.d/mongodb-org-3.4.repo添加以下內容：
[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的狀態：systemctl status mongod.service
4.設定開機啟動
設定開機啟動 ：systemctl enable mongod.service
5.啟動mongodb
啟動：mongo shell
6.設定mongodb遠程訪問
注意先打開27017埠，前面有講怎么打開
重啟mongodb：systemctl restart mongod.service
nginx安裝 /配置
Nginx 是 C語言 開發，建議在 Linux 上運行，當然，也可以安裝 Windows 版本，本篇則使用 [CentOS](https://www.linuxidc.com/topicnews.aspx?tid=14) 7 作為安裝環境，
1.gcc 安裝
安裝 nginx 需要先將官網下載的原始碼進行編譯，編譯依賴 gcc 環境，如果沒有 gcc 環境，則需要安裝：
yum install gcc-c++2.PCRE pcre-devel 安裝
PCRE(Perl Compatible Regular Expressions) 是一個Perl庫，包括 perl 兼容的正則運算式庫，nginx 的 http 模塊使用 pcre 來決議正則運算式，所以需要在 linux 上安裝 pcre 庫，pcre-devel 是使用 pcre 開發的一個二次開發庫，nginx也需要此庫，命令：
yum install -y pcre pcre-devel3.zlib 安裝
zlib 庫提供了很多種壓縮和解壓縮的方式， nginx 使用 zlib 對 http 包的內容進行 gzip ，所以需要在 Centos 上安裝 zlib 庫，
yum install -y zlib zlib-devel4.OpenSSL 安裝
OpenSSL 是一個強大的安全套接字層密碼庫，囊括主要的密碼演算法、常用的密鑰和證書封裝管理功能及 SSL 協議，并提供豐富的應用程式供測驗或其它目的使用，
nginx 不僅支持 http 協議，還支持 https（即在ssl協議上傳輸http），所以需要在 Centos 安裝 OpenSSL 庫，
yum install -y openssl openssl-devel5.下載nginx
官網下載https://nginx.org/en/download.html
使用`wget`命令下載：
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz兩種方式下哪個版本看自己需求，盡量用穩定版，
6.解壓：
tar -zxvf nginx-1.10.1.tar.gz
cd nginx-1.10.17.配置：
其實在 nginx-1.10.1 版本中你就不需要去配置相關東西，默認就可以了，當然，如果你要自己配置目錄也是可以的，
1.使用默認配置
./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下創建temp及nginx目錄
3.配置https支持的ssl模塊
./configure --prefix=/usr/local/nginx --with-http_ssl_module8.編譯安裝
make
make install9.查找安裝路徑
whereis nginx10.啟動、停止nginx
cd /usr/local/nginx/sbin/
./nginx
./nginx -s stop
./nginx -s quit
./nginx -s reload`./nginx -s quit`:此方式停止步驟是待nginx行程處理任務完畢進行停止，
`./nginx -s stop`:此方式相當于先查出nginx行程id再使用kill命令強制殺掉行程
查詢nginx行程：
ps aux|grep nginx11.重啟 nginx
1.先停止再啟動（推薦）：
對 nginx 進行重啟相當于先停止再啟動，即先執行停止命令再執行啟動命令，如下：
./nginx -s quit
./nginx2.重新加載組態檔：
當 ngin x的組態檔 nginx.conf 修改后，要想讓配置生效需要重啟 nginx，使用`-s reload`不用先 停止 ngin x再啟動 nginx 即可將配置資訊在 nginx 中生效，如下：
./nginx -s reload以上的步驟執行完后，瀏覽器輸入公網ip
看到這個，就代表著nginx配置上去了！
12.開機自啟動
vi /etc/rc.local增加一行：/usr/local/nginx/sbin/nginx
設定執行權限：
chmod 755 /etc/rc.local到這里，nginx就安裝完畢了，啟動、停止、重啟操作也都完成了，當然，你也可以添加為系統服務，我這里就不在演示了，
就重啟看下！
ok了，如果出不來記得開放80埠！
nginx靜態服務器 \ 反向代理
我們先上傳一個專案，將專案build后的檔案
在 /usr/local/nginx/conf/nginx.conf 中修改如下配置:
server {
listen 80;
server_name localhost;
location / {
root html/amap-use;
try_files $uri /index.html; #解決路由重定向跳轉 404 頁面配置
index index.html index.htm;
}
}指向到我們剛剛上傳的檔案！
再打開瀏覽器輸入 公網ip
成功了！
再來看反向代理
例如我們的vue專案，在vue.config.js里配置了反向代理，本地可用發布后獲取不到資料，這個時候我們要配置nignx反向代理
server {
listen 80;
server_name localhost;
location / {
root html/amap-use;
try_files $uri /index.html; #解決路由重定向跳轉 404 頁面配置
index index.html index.htm;
}
location /marketing { # 解決反向代理資料獲取不到
proxy_pass https://resource.smartisan.com/marketing;
}
location /product {
proxy_pass https://www.smartisan.com/product;
}
}多專案配置多個埠
解決： 在nginx組態檔中添加多個 server配置， 但是要注意 專案檔案夾要和 nginx /html目錄同級
目錄應該如下：
nginx
html
vue-project
react-project在 /usr/local/nginx/conf/nginx.conf 中修改如下配置:
server { #此2為默認埠設定
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; #解決路由重定向跳轉 404 頁面配置
index index.html;
}
location /marketing { # 解決反向代理資料獲取不到
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; #解決路由重定向跳轉 404 頁面配置
index index.html;
}
location /marketing { # 解決反向代理資料獲取不到
proxy_pass https://resource.smartisan.com/marketing;
}
location /product {
proxy_pass https://www.smartisan.com/product;
}
}各位在配置程序中可能會遇到的問題
1.瀏覽器ip打不開
原因可能如下
埠未開放，靜態資源指向錯誤等
卡住可以私信我，看到幫你處理，謝謝大家，
2.如果你是測驗的話建議可以把防火墻關了，或者打開所有埠，因為你會經常忘了自己沒開放打開埠
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/294181.html
標籤：其他
上一篇：harbor高可用部署