nodejs服务端部署教程一,https://segmentfault.com/a/11...
这篇文章主要介绍如何在服务端跑vuejs的项目,如果上一篇教程你成功输出了hello world,那这一篇更简单
首先你要有一个已经能在本地跑的基于vuejs的项目,我就以之前写的仿饿了么的项目为例来部署,如果你还没有已经写好的项目,可以用我的这个项目来学习,https://github.com/wmui/vue-elm
这次部署就用最古老最省心的方法,ftp来上传项目
项目打包
npm run build
后会有一个dist目录,这个文件夹就是我们要部署上线的项目
写一个小脚本
如果你会点nodejs,脚本就很好理解了,下面是app.js启动脚本的内容
const fs = require('fs'); const path = require('path'); const express = require('express'); const app = express(); // 模拟数据,api服务 var appData = require('./data.json'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; // api接口 var apiRoutes = express.Router(); apiRoutes.get('/seller',function(req,res) { res.json({ erron: 0,data: seller }) }); apiRoutes.get('/goods',data: goods }) }); apiRoutes.get('/ratings',data: ratings }) }); app.use('/api',apiRoutes); app.use(express.static(path.resolve(__dirname,'./dist'))) app.get('*',res) { const html = fs.readFileSync(path.resolve(__dirname,'./dist/index.html'),'utf-8') res.send(html) }) app.listen(8082);
简单解释一下上面的代码,由于项目需要些数据,我的模拟数据都在data.json这个文件里,所有简单的写了三个路由,对应获取到模拟数据。然后把dist目录静态出来,读取dist目录下的index.html(因为是单页应用,只有这一个html文件),监听8082端口
我们先在本地把要上传的文件都准备好:
我们的这个脚本使用了express框架,所以我们可以生成一个package.json,把依赖项添加进去
{ "name": "vue-elm-dist","version": "1.0.0","description": "","main": "app.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"author": "","license": "ISC","dependencies": { "express": "^4.15.3" } }
新建一个文件夹如elm,把整个项目通过ftp上传到根目录www文件夹下
启动服务
登陆到你的服务端,cd到elm文件夹,执行npm install 安装依赖,然后pm2 start app.js就成功启动服务了
现在通过ip加端口形式能正常访问,但是如果想通过域名访问就需要配置Nginx映射
Nginx 端口映射配置
首先你需要把一个二级域名解析到你的主机ip,比如我使用的elm.86886.wang这个二级域名
配置文件和之前的基本一致
upstream elm { server 127.0.0.1:8082; } server { listen 80; server_name elm.86886.wang; location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Nginx-proxy true; proxy_pass http://elm; proxy_redirect off; } }
我把它命名为elm-8082.conf
然后通过ftp上传到/etc/Nginx/conf.d/
目录下
执行sudo Nginx -s reload重启Nginx服务器,过个十分钟就应该能正常访问了 点击访问
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。