参考链接

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

centos部署vue项目的更多相关文章

  1. centos 部署 vue项目

    安装Nodejs 下载安装包,可选择其他版本 node-v10.16.0-linux-x64.tar.xz 将下载文件上传至linux服务器并解压 tar -xvf node-v10.16.0-lin ...

  2. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  3. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  4. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  5. SpringBoot入门教程(二)CentOS部署SpringBoot项目从0到1

    在之前的博文<详解intellij idea搭建SpringBoot>介绍了idea搭建SpringBoot的详细过程, 并在<CentOS安装Tomcat>中介绍了Tomca ...

  6. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  7. Docker 部署 vue 项目

    Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思 ...

  8. centos7 部署vue项目(前后端分离、nginx)

    一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...

  9. Centos7 使用nginx部署vue项目

    一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...

随机推荐

  1. 微信小程序生成带参二维码

    需求:生成小程序中的海报,需要小程序二维码可以使用户保存到本地在朋友圈分享 生成二维码工具类代码如下: package com.aone.foottalk.action.wx.util; import ...

  2. python统计字符串中字符个数

    str = "xxx" result = {} for i in set(str):#set将字符串转为集合对象,用于去重,减少计算量 result[i] = str.count( ...

  3. 本地访问Vmware虚机Web网站

    情况:公司是域环境,Vmware网络设置的是NAT连接模式,里外装的都是Windows,虚机网络IP地址是自动获取的. 查看: 1.虚机Ping本地的IP地址可以Ping通: 2.本地Ping虚机的I ...

  4. P2925 [USACO08DEC]干草出售Hay For Sale

    传送门 把每体积的干草价值看成一,就变成求最大价值 直接上背包就行了 注意优化常数 #include<iostream> #include<cstdio> #include&l ...

  5. Nohup后台运行程序

    场景:我现在需要跑脚本批量处理一些数据,但是我又不想盯着控制台看这个脚本的输出结果,想把这些输出结果记录到一个日志文件里面 方案:可以使用 Linux 的 nohup 命令,把进程挂起,后台执行 用法 ...

  6. java课后思考问题(一)

    1.一个Java类文件中真的只能有一个共有类吗? 一个Java类文件中只能有一个公有类 2.请使用Eclipse或javac检测一下以下代码,有错吗? 在Java中,可以将一个类定义在另一个类里面或者 ...

  7. T-SQL 聚合函数Count与NULL

    大家都知道聚合函数是做统计用的,而count函数是统计行数的,也就是满足一定条件记录的行数. 下面我们来看下这个count与NULL的微妙关系. CREATE TABLE dbo.Student ( ...

  8. 前端面试题 ---- html篇

    想要换工作了,转载自https://www.cnblogs.com/zhangshuda/p/8464772.html,感谢原博主. 一.html 1.html和xhtml区别 1. html:超文本 ...

  9. 使用vue-cli脚手架安装和webpack-simple模板项目生成

    Vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  10. centos7安装hadoop

    本次安装 hadoop版本为2.7.4,单节点安装.注意,在安装hadoop前要先安装jdk并配置好环境变量. 1. 上传hadoop压缩包文件到服务器上去(主机名centos1,ip 192.168 ...