從零部署你的react博客跟koa後臺服務

本教程環境

硬件配置：阿里雲主機 域名

系統： centos7.4

使用到的軟件有：

navicat

xshell5

若是須要購買域名以及服務器 請參考我另一篇文章前半部分： 從零搭建nodejs服務器，配置域名解析+https證書 （以阿里雲linux服務器爲例）

一、yum安裝必要模塊

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
複製代碼

二、配置yum源並安裝nginx

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
複製代碼

sudo yum install -y nginx
複製代碼

3.正確啓動nginx

首次啓動的nginx服務，沒有正常生成/var/run/nginx.pid文件，緣由是阿里雲的服務佔據了80端口，須要從新啓動；

netstat -anp|grep 80 
複製代碼

查看找到對應的進程id

kill -9 1671
kill -9 1002

nginx 
從新啓動服務
接下來就能夠正常使用
nginx -s quit 
nginx -s reload
nginx -s stop

複製代碼

而後可以在終端看到網頁打印內容

curl localhost 
複製代碼

要在瀏覽器打開顯示內容，須要配置阿里雲服務器的安全組

直接複製ip到瀏覽器打開

爲了後續方便，設置開機啓動nginx

sudo systemctl enable nginx.service
複製代碼

四、安裝node與npm

首先確保能夠訪問到EPEL庫

sudo yum install epel-release
複製代碼

安裝node

sudo yum install nodejs
複製代碼

安裝完成後

node -v
npm -v
能看到版本，證實你安裝成功
複製代碼

五、安裝node經常使用包

更改使用淘寶源：

npm config set registry https://registry.npm.taobao.org
複製代碼

驗證配置

npm config get registry
複製代碼

全局安裝

npm i pm2 webpack vue-cli n yarn -g
複製代碼

node -v #發現node的版本爲6.x，須要升級一下node，因爲我項目用的是nodev8.11.4

n v8.11.4  #升級到8.11.4
複製代碼

六、安裝上傳下載包

um -y install lrzsz

輸入sz 回車，會出現彈窗，能夠將服務器的文件傳到本地。

輸入rz 回車，會出現彈窗，能夠將本地的文件傳到服務器。
複製代碼

七、安裝mysql

mkdir down && cd soft

mkdir app backup download logs work && cd download

wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm #下載安裝須要用到的源
rpm -ivh mysql-community-release-el7-5.noarch.rpm   #安裝下載的源
yum install mysql-server #安裝mysql
service mysqld start #啓動mysql服務
mysql -V 查看版本
複製代碼

8.修改mysql密碼並配置遠程鏈接

mysqladmin -u root password '密碼'  這裏我暫時用root
使用命令進入數據庫：
mysql -uroot -proot
複製代碼

在數據庫中終端輸入

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;
#第一個是數據庫，能夠改爲容許訪問的數據庫名稱
#第二個 是數據庫的表名稱，*表明容許訪問任意的表
#root表明遠程登陸使用的用戶名，能夠自定義
#%表明容許任意ip登陸，若是你想指定特定的IP，能夠把%替換掉就能夠了
#password表明遠程登陸時使用的密碼，能夠自定義


flush privileges;
#讓命令生效。須要注意的是每行命令的最後要加;，否則是不會執行的
複製代碼

輸入查詢命令來看看最終的結果。

SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user;
複製代碼

在此以前，咱們要先到阿里雲安全組裏面增長安全規則，不然仍是沒法遠程訪問的，就跟前面的http：80端口同樣

本身電腦cmd界面遠程登陸

mysql -h 服務器ip地址 -P 3306 -u root -p密碼

客戶端登陸（使用navicat）在平常開發中也是使用圖形界面，方便操做

這裏是這個軟件的下載地址跟破解補丁 navicat

九、安裝git，而且拉取倉庫項目

yum install git

git --version #查看版本

mkdir -p /www/git && cd /www/git

git clone https://github.com/jgchenu/JGBlog-Server.git #博客後臺倉庫
git clone https://github.com/jgchenu/Blog-Web.git #博客管理倉庫
git clone https://github.com/jgchenu/Blog-Admin.git ##博客倉庫
# 改一下容易拼寫的名字，方便上線
mv JGBlog-Server server && mv Blog-Web web && mv Blog-Admin admin
複製代碼

十、打包react並啓動node服務

這裏是web倉庫的package.json 的homepage，要修改爲你要部署的域名地址做爲根目錄

admin的倉庫也同樣同上

建議先將倉庫fork到你本身的倉庫，而後拉取倉庫，修改後從新提交到你本身的倉庫，方便後面各類修改。

注意 注意 注意 在這裏要記得！！！

在項目根目錄增長pm2.json

{
    "apps": {
        "name": "wuwu",                             // 項目名          
        "script": "./bin/www",                      // 執行文件
        "cwd": "./",                                // 根目錄
        "args": "",                                 // 傳遞給腳本的參數
        "interpreter": "",                          // 指定的腳本解釋器
        "interpreter_args": "",                     // 傳遞給解釋器的參數
        "watch": true,                              // 是否監聽文件變更而後重啓
        "ignore_watch": [                           // 不用監聽的文件
            "node_modules",
            "logs"
        ],
        "exec_mode": "fork",                // 應用啓動模式，支持fork和cluster模式
        "instances": 1,                             // 應用啓動實例個數，僅在cluster模式有效 默認爲fork；或者 max
        "max_memory_restart": "500M",                    // 最大內存限制數，超出自動重啓
        "error_file": "./logs/app-err.log",         // 錯誤日誌文件
        "out_file": "./logs/app-out.log",           // 正常日誌文件
        "merge_logs": true,                         // 設置追加日誌而不是新建日誌
        "log_date_format": "YYYY-MM-DD HH:mm:ss",   // 指定日誌文件的時間格式
        "min_uptime": "60s",                        // 應用運行少於時間被認爲是異常啓動
        "max_restarts": 30,                         // 最大異常重啓次數，即小於min_uptime運行時間重啓次數；
        "autorestart": true,                        // 默認爲true, 發生異常的狀況下自動重啓
        "cron_restart": "",                         // crontab時間格式重啓應用，目前只支持cluster模式;
        "restart_delay": 10,                      // 異常重啓狀況下，延時重啓時間
        "env": {
           "NODE_ENV": "production",                // 環境參數，當前指定爲生產環境 process.env.NODE_ENV
           "REMOTE_ADDR": "愛上大聲地"               // process.env.REMOTE_ADDR
        },
        "env_dev": {
            "NODE_ENV": "development",              // 環境參數，當前指定爲開發環境 pm2 start app.js --env_dev
            "REMOTE_ADDR": ""
        },
        "env_test": {                               // 環境參數，當前指定爲測試環境 pm2 start app.js --env_test
            "NODE_ENV": "test",
            "REMOTE_ADDR": ""
        }
    }
}
複製代碼掘金招聘運營經理、內容運

做者：武武
連接：https://juejin.im/post/5b173fa8f265da6e484cf163
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

複製代碼

而後在package.json增長

"pm2": "pm2 start pm2.json" 
複製代碼

sudo chmod 777 /www  
#增長對/www目錄下的讀寫權限
cd /www/git/web && yarn
#等待下載完依賴
yarn build #打包
cd /www/git/admin && yarn
yarn build #打包
cd /www/git/server
vim config/index.js #修改數據庫的password爲你本身設置的密碼
yarn  
yarn pm2  #pm2啓動服務守護進程，watch選項監聽node文件變化會重啓node進程 mode 爲fork，以上均可以經過修改pm2.json配置

複製代碼

十一、使用nginx映射服務，以及代理轉發

cd /etc/nginx/conf.d
touch web.conf
複製代碼

複製下面的配置信息

增長web博客頁面nginx配置文件

server {
            listen 80;

            server_name blog.jgchen.xin;

            root /www/git/web/build;

            index index.html;

            location / {
                try_files $uri $uri/ /index.html;
            }

            location /api/ {
                    proxy_pass http://localhost:8000/api/;
           }
            location /upload/{
                    proxy_pass http://localhost:8000/upload/;
            }
           gzip on;
           gzip_buffers 32 4k;
           gzip_comp_level 9;
           gzip_min_length 200;
           gzip_types text/css text/xml application/javascript;
           gzip_vary on;
    }

複製代碼

增長admin博客頁面nginx配置文件

touch admin.conf
複製代碼

複製下面的配置信息

server {
            listen 80;

            server_name admin.jgchen.xin;

            root /www/git/admin/build;

            index index.html;

            location / {
                try_files $uri $uri/ /index.html;
            }

            location /api/ {
                    proxy_pass http://localhost:8000/api/;
           }
            location /upload/{
                    proxy_pass http://localhost:8000/upload/;
            }
           gzip on;
           gzip_buffers 32 4k;
           gzip_comp_level 9;
           gzip_min_length 200;
           gzip_types text/css text/xml application/javascript;
           gzip_vary on;
    }
複製代碼

#從新啓動下nginx
nginx -t #提示successful
nginx -s reload 
複製代碼

十一、阿里雲配置子域名解析

添加admin.jgchen.xin子域名解析

添加blog.jgchen.xin子域名解析 同上。

瀏覽器打開blog.jgchen.xin

瀏覽器打開 admin.jgchen.xin

若是須要添加https 請參考我另一篇文章後半部分： 從零搭建nodejs服務器，配置域名解析+https證書 （以阿里雲linux服務器爲例）

最後，一步步編寫不易，以爲有幫助，不用打賞，把❤就點亮行，謝謝。