centos部署vue项目

参考连接
nodejs服务器部署教程二,把vue项目部署到线上html

打包

#在本地使用如下命令,打包
npm run build 
#打包以后本地会出现dist文件夹。将dist文件夹以及package.json 文件上传到centos服务器上,此处随便什么位置,新建个文件夹就能放。

启动项目

新建一个app.js文件,文件内容以下vue

//定义目录
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

#安装依赖包,若是系统中没有安装node,npm命令会找不到
npm install
#启动vue项目(pm2命令也须要单独安装,安装以后再执行下面命令)
pm2 start app.js

执行上面操做以后,访问127.0.0.1:8082就能够了,根据本身设置的端口访问。若是想从外网访问,则须要知道本身的ip,ip:port的方式就能够从外网访问。nginx

使用Nginx代理,使用域名访问

若是Nginx安装不会请点击此处express

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

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边能够访问你的项目了。json

相关文章
相关标签/搜索