vue+express+mysql經過nginx反向代理映射不一樣項目的服務器部署

時間 2020-05-26

標籤 vue+express+mysql vue express mysql 經過 nginx 反向代理映射不一樣項目服務器部署欄目 MySQL 简体版

原文原文鏈接

前言：javascript

這個教程是我本身摸索的，至於原理性東西，如今還在學nginx，後期會了再來完善！php

開始配置項目以前，請確保你有一臺服務器，學生初次購買的話，很便宜，一百多能夠有一年的服務，阿里雲或者騰訊雲，百度雲均可以，我是買騰訊雲的。css

實驗配置：本地是windows10,前臺用的是vue，後臺用的是nodejs的框架express，數據庫用的是mysql,服務器個人是學生服務器，很便宜100多，linux centos7,而後本次實驗我用的是寶塔鏈接個人服務器，至於寶塔怎麼鏈接，這個網上也有教程，初學者建議使用寶塔配置，寶塔配置事後，你會明白一些原理性的東西，後期你能夠學學Linux操做系統的操做指令，用xShell遠程鏈接服務器，再配置，這樣的話，你思路就清晰了。html

基於linux的萬物皆文件，說一下進入某個文件的小技巧。前端

Linux下的進入某個目錄是 cd /xxx/xxx,這個目錄結構通常比較長，很容易輸錯，小技巧就是使用ftp鏈接你的服務器，而後它裏面能夠可視化你的文件，找到你的文件，而後選擇複製路徑，在xsell裏面 cd /粘貼你複製的路徑，這樣你的速度又快，又準，哈哈。vue

---------------------------------------------------------------------------------------------------------------------------java

開始正文：node

1.服務器模塊mysql

以個人騰訊云爲例：linux

上面能夠看到，我已經申請了一臺服務器，並且已經完成了備案，這些怎麼購買的問題，網上有其它教程，我不贅述，至於備案的話，的確比較慢的，由於我是全程在網上備案的，加上是除夕那天買的，備案成功，好像一個月時間，中間騰訊客服小姐姐屢次打電話給我，說個人網頁不能夠有其它商業標籤，由於是我的網站的緣由，企業網站才能夠盈利。還有一次是，我把內容放在404頁面了，由於我以爲個人項目不符合規定，索性讓訪客直接訪問404頁面，而後騰訊客服小姐姐又打電話給我，說個人網站找不到了，必須改回來，否則一星期後，就要關閉個人網站……因此我又修改了，說這些的目的是爲了你購買服務器以後，我的項目放置的一些問題，必定要符合規定，避免一些沒必要要的麻煩。

再多說一點，可能你會有疑惑，說爲何有的我的網站，有的還有島國等動做片，這些都沒被禁掉，首先，你要明白，有的一些服務器是國外，或者香港澳門臺灣這些的，國外服務器，以及我國的香港，澳門，臺灣這些比較特殊的地區不須要備案，限制比較小，至於爲何你能夠上網本身再搜索其它答案。

上面好像廢話了，首先開始正文：

1.1給本身購買的域名配置二級域名，或者三級域名。

個人網址是：humianyuan.cn(這個是一級域名)，（www.humianyuan.cn）二級域名，這兩個域名映射的都是個人靜態項目，就是vue打包後的dist資源而已。

還有一個onepice.humianyuan.cn,它映射的是個人動態項目，就是有數據庫操做的。(這個不知道應該屬於二級域名，仍是三級域名，若是你剛好知道規則，能夠在評論區幫我解答一下，十分感謝。)

在搜索框輸入：域名，而後點擊個人域名管理

而後能夠看見下面這個東西：點擊下面的紅色的劃線部分，進行配置下級域名（由於不知道叫幾級，統一稱下級）

點擊解析以後，你能夠看到：以下界面，點擊添加記錄，給你的域名配置下級域名

而後把你的鼠標放到不一樣的輸入框，它會有對應的一些配置的提示，例以下面我舉倆個例子：

上面這些提示，應該能夠說提示的很全面了，好比主機記錄，就是填入你想要爲你的域名配置的下級域名的別名.

打個比方，個人域名是humianyuan.cn,那麼騰訊雲自動幫我配置了，www.humianyuan.cn(下級域名)，

而後我再添加了一個，onepice.humianyuan.cn(下級域名)，這樣我就多了一個下級域名，至於能夠配置多少個，好像在哪裏有說明，具體看不一樣服務器提供商能夠幫你免費解析多少個子域名。

附上demo：

添加成功以下

演示個人輸入操做：

這樣你的下級域名就配置好了，通常你若是是剛開通服務器的話，要先把你的80端口打開，有的服務器提供商默認是沒有開啓的，至於怎麼開啓，是在控制檯的安全按鈕裏面的安全組，點擊安全組是一些默認幫你配置好的端口映射，怎麼配置，也可自行百度。

這樣，你的騰訊雲自身攜帶的管理後臺就配置好了。

接下來配置你的寶塔面板。

1.2寶塔面板：

1.2.1在搜索框搜索，並下載好下面的軟件。

nginx用於代理映射，充當代理服務器，nginx但是牛逼的東西，配置雖然幾步，可是裏面的原理性東西但是很深的，它不但能夠當代理服務器，還能夠充當web服務器，還有郵件服務器等等……功能很強大，可是個人瞭解不多，就不吹了，

mysql是我用來放值個人數據庫的。

pm2下載後，默認幫你配置好了node環境，還有npm，用於node擴展包的管理工具，你能夠利用npm再鏈接淘寶的鏡像地址，而後下載cnpm，用cnpm安裝node擴展包速度很快，比較npm服務器在國外，cnpm是淘寶搭建的，因此感謝淘寶，感謝阿里。

下載好上面紅色部分的軟件後，你須要在pm2裏面下載express框架，由於我node後臺用的是它。只說它。

點擊pm2的設置：

點擊下面的模塊管理，在搜索框搜索express，而後安裝。

到這裏，你的第三方軟件下載完成。接下來是這些軟件的配置的問題。

1.2.2端口配置：

放置你須要用的端口，例如我後臺接口的端口號是3000，我索性把3000到3500一塊兒放行，不過這裏配置了，好像騰訊後臺也沒有放行，因此這裏不配置應該沒有關係，由於還須要在騰訊雲後臺再次配置，可是個人後端接口自己就放在個人自己服務器上，因此內部端口是默認所有放行的，此處的配置好像沒有意義。不過若是你有一百臺服務器的話，那麼這裏配置好，在騰訊雲後臺也要配置，不過若是你有一百臺服務器，應該是看不到我這篇文章了，畢竟這個是小白看的。

1.2.3數據庫配置

點擊你的添加數據庫，就能夠配置數據庫名稱，密碼了。

給個demo:

接下來說一下，上傳你的項目到服務器，再講nginx，反向代理吧。

2.上傳項目

2.1項目模塊

首先上傳項目以前首先，你要把你的vue,運行npm run build,進行打包，而後把打包結果生成的dist文件夾直接壓縮，上傳到寶塔。

點擊文件，來到wwwroot的目錄下：

能夠看到，我下面的三個紅線的文件夾，帶有1的是個人先後端分離項目，帶有2的是純靜態頁面，不涉及數據庫操做。

再來給你看看目錄結構：

純前端的目錄結構：看了下面你就會知道，你上傳的只有dist下面的內容，node_module是不用上傳的，由於npm2已經自帶它須要的環境配置了。

先後端分離項目：

*前端模塊，把打包好的dist文件直接上傳到這裏就好。

*後端模塊，把你的後端項目壓縮後直接上傳，丟到這裏，node_module這些包我本來覺得不須要的，可是後臺須要，由於我上傳了以後，把它刪了，而後用xshell鏈接服務器的時候，進入這個目錄，執行了npm install,它會自動根據package.json文件的依賴來下載依賴的node包，可是npm下載的時候失敗了，多是國外服務器鏈接到這裏太遠了，不穩定，因此我直接使用npm install -g cnpm --registry=https://registry.npm.taobao.org ，安裝個人cnpm,而後用cnpm install安裝好個人項目依賴，發現多了的node_module,因此應該說明你的後臺用到的node擴展包不能夠刪除。

至於怎樣上傳，直接點擊上傳按鈕就行了，其餘的應該不能吧，好歹寫過點程序……

3.接下來進行nginx的反向代理配置

直接粘貼配置信息再說明：在軟件商店點擊nginx的設置

而後彈出：

點擊配置修改

藍色部分是默認配置。

user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 51200; events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; #include luawaf.conf; include proxy.conf; default_type application/octet-stream; server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; fastcgi_intercept_errors on; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_name zone=perserver:10m; server_tokens off; access_log off; 
server
    {
        listen 80;#監聽外部端口
        server_name humianyuan.cn;監請求的服務器名稱，若是你只有ip地址，那就在這裏寫ip就行了，好比：198.121.2.2
root  /www/wwwroot/humianyuan.cn;
        location / {
            try_files $uri $uri/ @router;#須要指向下面的@router不然會出現vue的路由在nginx中刷新出現404
            index  index.html index.htm;
        }
        #對應上面的@router，主要緣由是路由的路徑資源並非一個真實的路徑，因此沒法找到具體的文件
        #所以須要rewrite到index.html中，而後交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        index index.html index.htm index.php

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
    
        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
    server
    {
        listen 80;#監聽外部訪問的端口
        server_name onepice.humianyuan.cn;
        index index.html index.htm index.php;
        root  /www/wwwroot/onepice/dist;#你的前端路徑下index.html的根目錄
         location / {
            try_files $uri $uri/ @router;#須要指向下面的@router不然會出現vue的路由在nginx中刷新出現404
            index  index.html index.htm;
        }
        #對應上面的@router，主要緣由是路由的路徑資源並非一個真實的路徑，因此沒法找到具體的文件
        #所以須要rewrite到index.html中，而後交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #/api_hu66 是你本身定義的接口名稱，你後臺本身定義的
         location /api_hu66 {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass  http://127.0.0.1:3000;    #node api server 即須要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
      #error_page 404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
    
        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}