一、安裝Mysql，可外網訪問

1. 更新系統 【在root使用者下】

apt-get update

2.安裝Mysql-server

apt-get install mysql-server
apt-get isntall mysql-client
apt-get install libmysqlclient-dev

注：若是安裝出現問題，參考部落格：點選開啟連結，當然我在安裝的時候沒有出現任何問題，祝各位也一切順利！

3.查詢是否安裝成功

netstat -tap | grep mysql

4.使用客戶端遠端連結

預設情況下，不能用客戶端遠端連線的，阿里雲提供的help.docx裡面做了設定說明，mysql密碼預設存放在/alidata/account.log

// 登入資料庫
mysql -u root -p
// 輸入資料庫的密碼
Enter Password：
// 為root使用者授予全部許可權 （實際的語句寫法有很多，諸君可自行百度）
grant all on *.* to 'root'@ '%'   identified  by '資料庫密碼' with grant option
// 重新整理列表，使得修改許可權生效
flush privileges

# 資料庫啟動
service mysql start
# 資料庫停止
service mysql stop
# 資料庫重啟
service mysql restart

客戶端工具我使用的是Navicat，其實這個客戶端工具是個人選擇，看諸君個人的喜好。

二、部署Node專案

其實再實際操作前，我對於如何部署後臺專案可謂是一竅不通，但在網上查看了許多文件後，總算明白了。其實部署，說到底就是將後臺專案放置在自己的阿里雲伺服器上，並且讓它一直處於執行狀態，這樣就可以前端的Web專案就可以一直訪問了，是不是很簡單，那麼就介紹一下具體步驟：

1.安裝Node和npm

安裝步驟網上有很多，大家可以自行百度檢視，附上阿里雲的官方文件：點選開啟連結，在該教程裡還讓安裝版本管理nvm，方便後期長期進行node版本管理，但因為筆者在進行部署的時候也是菜鳥一枚，沒想過要長期管理，所以沒有安裝，當然頁完全不影響後面的部署

2.首先將Node專案放在伺服器上

Node專案和後臺的Java程式碼不一樣，不需要編譯，直接進行上傳就可以，所以我才用的懶人的辦法——使用git

// 安裝git  （這裡是本人的安裝，如需更高版本的安裝，請自行百度）
apt-get install git

安裝成功後，就可以按照以往的git操作命令，將Node專案克隆到伺服器上

3.啟動Node專案

如果是直接使用node app.js 或者 npm start啟動專案，那麼在關閉連線後，專案的啟動也會停止，所以我們需要使用讓Node專案能夠一致在後臺自行執行，在這裡我使用的是PM2管理工具，當然還有forever等，大家可以自行嘗試.

// 全域性安裝pm2
npm install -g pm2

安裝成功後就進入執行pm2命令，執行Node專案，我這裡的專案是Express，首先啟動的是bin/www下的檔案，所以在使用時先進入Node專案下，然後執行 pm2 start bin/www 來啟動專案。其實pm2還有很多用途，詳細的命令，附上參考文件。

【注意】在部署伺服器前，需要將監聽的地址改為0.0.0.0，具體原因，嗯~ o(*￣▽￣*)o，筆者沒有細究。

找到Node專案下bin/www 檔案，找到監聽的地方

可見，監聽的地址是由onListening函式來處理的，找到這個函式進行修改

三、部署React專案

部署前端專案，我採用的是最為簡單nginx，只需要安裝好nginx，配置好配置檔案nginx.conf，然後將打包好的檔案丟到伺服器上就可以，聽上去是不是很簡單，那麼就實踐操作一下吧。

1.上傳打包好的資原始檔

在本地執行npm run build命令後，將dist資料夾中的資原始檔上傳到伺服器，我上傳使用的是rz和sz命令，大家可以自行百度如何安裝，當然你也可以選擇自己熟悉的上傳方式，反正只要上傳成功就行。

我是在/home/React_WEB中存放資原始檔，這個路徑很重要，關係到後續的nginx配置

2.安裝nginx

apt-get install nginx

3.配置nginx

要配置nginx就需要先了解配置檔案的基本屬性，附上參考文件。

瞭解nginx的基本配置屬性後，我們發現其實只需要修改配置檔案/etc/nginx/nginx.conf中修改http部分，設定其中的Server屬性，配置虛擬主機，主要就是設定監聽的埠，資源的訪問地址等，我的配置比較簡單，參看下圖：（僅供參考）

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_disable "msie6";

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
        // 原本這個檔案是要引入sites-enabled的資料夾下面的預設配置檔案，我這裡是將其註釋掉，然後直接在nginx.conf檔案裡寫
	# include /etc/nginx/sites-enabled/*;
	server {
		listen 80;  // 監聽的埠
		server_name whsjblog.com;   // 設定訪問的域名或者改為伺服器的公網IP地址
		root /home/React_WEB;    // 資原始檔的存放路徑
		index index.html;     
		location ~^/favicon\.ico$ {
			root /home/React_WEB;
		}
		location / {
			try_files $uri $uri/ /index.html;
		}
	}
}