React+Nodejs+Mysql搭建網站及雲服務器部署

時間  2021-08-13
標籤 javascript php css html 前端 java node mysql react linux 欄目 React 简体版
原文   原文鏈接

項目簡介

最近接了一個朋友的項目，須要作一個導航網站，同時還配套用戶登陸自定義導航頁面等一些列功能，因此使用react框架和nodejs的express框架以及mysql搭建了一個網站，可是在部署的時候遇到了不少的問題，由於第一次搭建線上環境，這裏記錄一下本身的部署過程，以及踩的坑。javascript

  1. 購買雲服務器並登錄

這裏使用的是阿里雲的服務器，linux系統，CentOS 7，遠程鏈接工具使用的是雲服務器自帶的Workbench遠程鏈接，固然也可使用Xshell等或者本地的cmd等遠程接連工具，文件上傳使用的是Xftp。php

image.png

  1. 搭建mysql環境

使用CentOS7自帶的yum命令來安裝,css

yum install mariadb-server mariadb # 安裝數據庫
systemctl start mariadb # 啓動數據庫
複製代碼
mysql -u root -p -- 初始密碼爲空，直接回車便可
mysql> set password for 'root'@'localhost' =password('你的密碼'); --設置數據庫密碼
複製代碼
vim /etc/my.cnf # 使用vim命令打開mysql的配置文件
default-character-set =utf8 # 在配置文件後面後面加上編碼方式
複製代碼
--把在全部數據庫的全部表的全部權限賦值給位於全部IP地址的root用戶
mysql> grant all privileges on *.* to root@'%'identified by 'password';
複製代碼

接下來使用navicate12實現數據庫的遠程鏈接html

image.png

image.png

至此，數據庫能夠在本地進行遠程操控進行導入數據等操做。前端

3.搭建Nodejs環境java

首先去nodejs官網下載nodejs的壓縮包，找到雲服務器系統對應的版本，下載好以後使用xftp放到雲服務器的根目錄下node

tar -xvf node-v12.4.0-linux-x64.tar.xz #解壓Node.js的安裝包
mv node-v12.4.0-linux-x64/ /usr/local/node  # 重命名Node.js安裝目錄
# 將Node.js的可執行文件目錄加入到系統環境變量中
echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile 
source /etc/profile # 使剛配置的Node.js環境變量當即生效。
# 查看node和npm版本
node -v
npm -v
複製代碼

至此，nodejs後臺環境搭建完成。 接下來，將node後臺項目所有文件放入server文件夾中，注意node_modules文件夾不要複製，而後在服務器的控制檯cd到server目錄下，npm install來進行安裝相關的依賴包。 關於node後臺項目的搭建，以及目錄架構等詳細內容將在另外一篇文章中講到 此時node項目中package.json文件中的script命令以下：mysql

"scripts": {
    "start": "node ./bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
複製代碼

在server目錄下執行node ./bin/www或者npm start便可執行後臺程序，可是若是將命令窗口關閉，那麼後臺程序就會中止運行，因此須要下載pm2來守護進程react

yum install -y pm2
複製代碼

而後能夠看到package.json文件中的script命令以下：linux

"scripts": {
    "start": "node ./bin/www",
    "prd": "pm2 start ./bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
複製代碼

能夠發現對應的prd命令以下：因此須要執行的命令爲:

pm2 start ./bin/www --watch
複製代碼

其中--watch爲監聽後端項目的改變更態更新後端程序 經過pm2 list命令查看,發現status狀態爲online。到此，後端項目部署完成 經常使用的pm2命令：

$ pm2 start app.js                # 啓動app.js應用程序
$ pm2 start app.js --name="api"   # 啓動應用程序並命名爲 "api"
$ pm2 start app.js --watch        # 當文件變化時自動重啓應用
$ pm2 start script.sh             # 啓動 bash 腳本
$ pm2 list                        # 列表 PM2 啓動的全部的應用程序
$ pm2 monit                       # 顯示每一個應用程序的CPU和內存佔用狀況
$ pm2 show [app-name]             # 顯示應用程序的全部信息
$ pm2 logs                        # 顯示全部應用程序的日誌
$ pm2 logs [app-name]             # 顯示指定應用程序的日誌
$ pm2 flush                       # 清空全部日誌文件
$ pm2 stop all                    # 中止全部的應用程序
$ pm2 stop 0                      # 中止 id爲 0的指定應用程序
$ pm2 restart all                 # 重啓全部應用
$ pm2 reload all                  # 重啓 cluster mode下的全部應用
$ pm2 delete all                  # 關閉並刪除全部應用
$ pm2 delete 0                    # 刪除指定應用 id 0
$ pm2 startup                     # 建立開機自啓動命令
$ pm2 save                        # 保存當前應用列表
複製代碼
  1. Nginx託管前端

首先檢查服務器是否安裝了GCC

yum list installed | grep "gcc" # 可在任意目錄下輸入
複製代碼

出現下圖，則說明GCC已安裝 image.png

yum -y install gcc # 安裝GCC
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel # 安裝nginx所需的依賴插件
wget https://nginx.org/download/nginx-1.16.1.tar.gz #下載nginx安裝壓縮包
tar -zxvf nginx-1.16.1.tar.gz # 解壓，須要和下載文件相同目錄,推薦放在根目錄下
./configure --prefix=/usr/local/nginx # 進行配置
make
make install # 依次輸入
cd /usr/local/nginx/sbin
nginx -t # 檢測是否安裝成功
複製代碼

image.png

顯示如上圖所示則表示安裝成功

  • 啓動niginx

cd /usr/local/nginx/sbin到當前目錄下

./nginx # 啓動nginx
netstat -tunpl|grep nginx # 查看nginx是否啓動成功
複製代碼

image.png 顯示80端口開啓，則表示nginx啓動成功

  • 中止，重啓nginx

cd /usr/local/nginx/sbin到當前目錄下

./nginx -s stop # 第一種方法
複製代碼
//第二種，先netstat -tunpl|grep nginx查看80端口的進程號，而後使用kill命令殺死這個進程
netstat -tunpl|grep nginx
kill -9 '80端口的進程號'
//最後在輸入netstat -tunpl|grep nginx，確認80端口被殺死了。
netstat -tunpl|grep nginx
複製代碼
./nginx -s reload # 重啓
複製代碼
  • nginx開機自啓動

vim /etc/rc.d/rc.local 使用vim命令打開對應文件 輸入i進入linux文件輸入模式 在對應位置添加以下路徑/usr/local/nginx/sbin/nginx 按ese鍵退出輸入模式，輸入:wq保存並退出

image.png

  • 配置nginx

cd /usr/local/nginx/conf到該目錄下 vim nginx.conf進入該文件

user  root; # 設置nginx啓動用戶和系統用戶一致，防止出現403 
worker_processes  1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 開啓gzip壓縮,可以大幅提升網站的訪問速度
    gzip on; 
    gzip_min_length 1k;
    #gzip_disable "msie8";

    # gzip_vary on;
    # gzip_proxied any;
    gzip_comp_level 4;
    gzip_buffers 4 16;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    # 開啓gzip壓縮

    server {
        # 重要配置項
        listen       80; #監聽端口
        server_name  www.tik128.com;# 轉發的域名
        root         /root/www;# 項目文件的根目錄
        index        index.html;# index主頁文件名稱
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location ~^/favicon\.ico$ {
        root /root/www;
        }
        location / {
        try_files $uri $uri/ /index.html;
        }
        # 重要配置項

        #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;
        #}
    }
複製代碼

修改完成以後保存並重啓nginx便可

nginx配置文件相關參數解讀

  • server：server爲一個端口的監聽配置，裏面能夠擁有多個location路由配置。一個server是一個大單元。你能夠複製多個server來監聽不一樣端口或相同端口不一樣域名（server_name）
  • server_name：監聽的主機名。能夠是域名。好比aaa.dongzhongwei.com和bbb.dongzhongwei.com，雖然都是走的80端口，但能夠經過server_name來區分不一樣的server。
  • listen：監聽80端口
  • client_max_body_size： 附件上傳支持最大容量。默認1M，超出則報413附件太大錯誤。（該配置好像能夠寫在location裏面。）
  • location： 監聽端口下的路由。/爲監聽根路徑
  • location.proxy_pass： 轉發的路徑。即將127.0.0.1:80/轉發到localhost:6606/。或者如127.0.0.1:80/test轉發到localhost:8080/testabc
  • location.proxy_redirect：是否轉發方式。off否

location配置規則(優先級)

(localtion =) > (localtion完整url) > (localtion ^~) > (localtion ~,~*) > (lcoaltion部分起始路徑) > (/)
    = 表示精確匹配
    ^~ 表示指定的路徑開頭
    ~ 表示區分大小寫的正則匹配
    ~* 表示不區分大小寫的正則匹配
    / 通用匹配,全部的URL都是以此爲開頭
ex:
location ^~ /static/ {
   #規則1
}
location ~ \.(gif|jpg|png|js|css)$ {
   #規則2
}
location ~* \.png$ {
   #規則2
}
//http://xdh.com/static/a.png 優先匹配到規則1，則不匹配後面的規則
//http://xdh.com/a.png 匹配到規則2
複製代碼

在nginx配置完成以後，將本地開發環境下的react項目文件使用webpack進行打包，並將dist目錄下的文件拷貝到/root/www文件夾下，而後便可經過域名進行訪問

經過域名進行訪問， 還須要在阿里雲的安全組中配置對外開放的端口，並將服務器的IP地址進行域名解析,具體以下：

配置安全組對外開放端口:

image.png

image.png

域名解析，以後便可用域名訪問服務器

image.png

最後，附上項目的網址 tik128.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程