一、安裝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;
}
}
}
配置成功後,只需要在地址欄輸入域名和服務器的外網IP地址就可以訪問了。