一、項目背景
項目背景，現在開發的項目，需要搭建一個Linux環境，方便遠端的測試人員訪問項目。項目採用的是前後端分離，前端使用Node.js+React+webpack，在部署時，只需要使用webpack打包生成靜態文件，就能實現前端的訪問。如何實現，下面的不走會一步步介紹，後端時候的是Java開發的後臺邏輯，使用Gradle將項目打成war包，部署在服務器上，至於數據庫，數據庫沒有放在服務器上，直接在後臺對數據庫連接做了連接的處理。
二、安裝環境
此次環境需要安裝的有Node.js（前端環境）、Nginx（反向代理服務器）、Tomcat（後端war包部署環境）、Redis（Nosql緩存）。
2.1 安裝Node.js
命令：sudo apt-get install nodejs
2.2安裝npm
sudo apt-get install npm
安裝完成後可以通過命令查看相應的版本，檢查是否安裝成功。
2.3 安裝Nginx
直接使用apt倉庫安裝， sudo apt-get install nginx
安裝完成後查看各文件安裝位置，
/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放靜態文件
2.4 安裝 Redis
通過命令行安裝：sudo apt-get install redis-server
安裝完成後，直接通過redis-cli查看，使用ping看是否安裝成功！
2.5 Tomcat 安裝
這裏通過官網下載相應的壓縮包（下載地址）
傳到Linux系統指定文件夾下，解壓到指定文件夾。
解壓命令： sudo tar -zxvf apache-tomcat-8.5.30.tar.gz
這裏我先做了解壓，最後在移動到/usr/local路徑下新建的tomcat文件夾下
三 、 配置
首先是Node.js，無需配置，node只提供一環境，畢竟不在服務器上開發，Redis也無需配置，只使用了本地的緩存，配置都在後端寫好了。這裏我們需要配置的是Nginx，Tomcat。
3.1 配置Tomcat
使用Nginx主要是通過前端的靜態資源，當需要請求後端的服務時，需要通過Nginx反向代理到後端的服務（這裏使用的是tomcat）。這裏我們到tomcat的安裝目錄，在bin文件下，找到startup.bat文件以管理身份打開。
在配置文件末尾加上：
#set java environment
JAVA_HOME=/usr/local/java/jdk1.8.0_171 //本機jdk安裝地址
CLASS_PATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOEM/bin:$PATH
export JAVA_HOME CLASS_PATH PATH
修改端口
根據項目需要，修改tomcat請求端口，我這裏使用的還是默認的8080，
打開server.xml文件，文件在安裝目錄conf下
端口號：
* 拓展 增加用戶功能，方便以後項目多的話，方便管理。
增加用戶在安裝目錄下的conf文件夾下的tomcat-user.xml文件下，同樣的方式打開
打開文件後在文件的最後加上：
<role rolename="manager-gui"/>
<role rolename="admin-gui"/>
<user username="admin" password="admin" roles="manager-gui,admin-gui"/> //用戶，密碼
配置完成後，啓動tomcat，在bin文件夾下，使用sudo sh startup.sh啓動
輸入地址加載出tomcat歡迎頁安裝成功！
3.2 配置Nginx
前面也有說到Nginx的各文件夾地址：
/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放靜態文件
配置文件放在/etc/nginx文件夾下。進入/nginx 配置文件夾，發現有很多配置文件，我們需要配置的是nginx.conf
使用vim，或者如果是裝了其他的編輯器，可以直接通過編輯器打開修改。
編輯命名，我直接使用gedit打開。
http {
##
# Basic Settings
##
server {
listen 8000; //前端代理端口
server_name localhost; //IP
location / {
root /home/jerry/Desktop/app/dist; //前端資源入口文件
index index.html index.htm; //入口文件
try_files $uri $uri/ /index.html;
}
location /tool {
proxy_pass http://localhost:8080; //後端服務代理
}
}
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
}多餘的不用看，我們只需要配置server{}部分。修改完成後保存。
通過/usr/sbin 文件夾下 ./nginx -t 檢查配置是夠有問題。
啓動Nginx 還是在/usr/sbin 文件夾下 通過命令 ./nginx -s start 啓動
通過localhost:80,查看是夠啓動成功。
四、部署項目
4.1前端項目
通過webpack打包成靜態文件，我是這裏直接在桌面上建了app文件夾，將前端文件傳入到app文件夾下，這裏可以再回去看一下nginx配置文件，location下的root，就是靜態文件存放的地址。當然這裏肯定是先傳靜態文件，再配置nginx。
root /home/jerry/Desktop/app/dist; //前端資源入口文件
4.2 後端部署
將後端的java文件，打包成war包，上傳至tomcat安裝目錄的webapp目錄下，這裏我將其解壓，重命名爲tool，
部署完成後，我們可以試着去登錄tomcat管理一下項目，
確保後端啓動完成後，我們直接在瀏覽器訪問，前端的項目入口，這裏是8000端口，爲什麼是8000，這裏就是剛纔在nginx中配置的listen監聽的端口號。
listen 8000; //前端代理端口 瀏覽器打開測試：成功登錄，通過前端請求，訪問後端代理服務。
這裏還有一點就是注意，80，8000,8080，端口被佔用，或者防火牆端口禁用的問題。
這個ubutu只是我的測試環境，真是的項目是在centOS版本上跑的，我會將在centOS上部署，的流程再整理一下發出，其實基本上相同只是安裝軟件會麻煩一點，ubuntu方便就在於他有一個源文件庫，我們可以通過命令下載，有的無需配置即可使用。這次就分享到這裏，可以加下公衆號方便學習，我會持續跟新，大家共同進步。
