centos部署vue项目

本文涉及的产品
网络型负载均衡 NLB,每月750个小时 15LCU
传统型负载均衡 CLB,每月750个小时 15LCU
应用型负载均衡 ALB,每月750个小时 15LCU
简介: 参考链接nodejs服务器部署教程二,把vue项目部署到线上打包#在本地使用以下命令,打包npm run build #打包之后本地会出现dist文件夹。将dist文件夹以及package.json 文件上传到centos服务器上,此处随便什么位置,新建个文件夹就能放。

参考链接
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边可以访问你的项目了。

相关文章
|
4月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
163 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
3天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
38 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
287 2
|
1天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
35 12
|
4月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
54 3
|
19天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
88 1
|
3月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
Oracle 关系型数据库 MySQL
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
Centos7下图形化部署单点KFS同步工具并将Oracle增量同步到KES
|
4月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
253 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置

热门文章

最新文章