centos部署vue項目

參考連接
nodejs服務器部署教程二，把vue項目部署到線上

打包

#在本地使用如下命令，打包
npm run build 
#打包以後本地會出現dist文件夾。將dist文件夾以及package.json 文件上傳到centos服務器上，此處隨便什麼位置，新建個文件夾就能放。

啓動項目

新建一個app.js文件，文件內容以下

//定義目錄
const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();
//vue目錄
app.use(express.static(path.resolve(__dirname, './dist')))

app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
//定義啓動的端口號
app.listen(8082);

運行以下命令：

#安裝依賴包,若是系統中沒有安裝node，npm命令會找不到
npm install
#啓動vue項目（pm2命令也須要單獨安裝，安裝以後再執行下面命令）
pm2 start app.js

執行上面操做以後，訪問127.0.0.1:8082就能夠了，根據本身設置的端口訪問。若是想從外網訪問，則須要知道本身的ip，ip:port的方式就能夠從外網訪問。

使用Nginx代理，使用域名訪問

若是Nginx安裝不會請點擊此處

Nginx配置文件(/etc/nginx/nginx.conf)

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

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

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
    #以上配置均是默認值不曾修改，若是想搞懂上面的是什麼意思，本身去慢慢學習吧
    #這個配置是負載均衡使用的
    #此處的app_nodejs是負載均衡的名字
    upstream app_nodejs {
        #訪問的實際地址是下面的，能夠有多個，多個時就達到了負載均衡的做用，後面其實還有一個參數，可是此處寫不寫無區別。
        server 127.0.0.1:8082;
        keepalive 64;
    }
        server {
        #監聽的是80端口，不建議換成其餘端口，由於換成其餘端口後，你訪問時，域名也得加上加上端口，好比端口號改爲8080，訪問時則是：onloading.cn:8080
        listen  80  default;
        #訪問的域名
        server_name onloading.cn; 
        #若是訪問的是ip，則直接返回404，此處只容許經過域名訪問
        if ($host ~ "\d+\.\d+\.\d+\.\d") {
                return 404;
        }
        location / {
            proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-Nginx-Proxy true;
                proxy_set_header Connection "";
                #指定使用哪一個負載均衡，其餘location的值均屬於默認值
            proxy_pass http://app_nodejs;
            proxy_redirect off;
        }

        }
}

配置完以後，使用onloading.cn邊能夠訪問你的項目了。