egg.js+vue.js 云服务器部署 -- 项目部署

上一章把云服务器的环境都配置好了,现在开始我们的项目部署;

egg.js+vue.js 云服务器部署 -- 环境配置



一、后台服务部署;

1、首先我们先把项目从git 上 clone下来;不在git的也可以通过Xftp 上传至服务器,接下来就是熟悉的味道,

cnpm install安装依赖包;

2、我的项目是用 egg-sequelize 构建的数据库,所以我这里直接使用命令生成对应的数据库和表;(注:我的后台项目已经构建好了生成数据库和表的配置)

# 升级数据库 npx sequelize db:migrate 

其他同学可以自行建库建表;

3、接着便是启动egg服务;

npm run start

框架内置了egg-cluster来启动Master 进程,Master 有足够的稳定性,不再需要使用pm2等进程守护模块。

默认开启了7001端口,接着便可通过ip:7001访问接口,查看接口是否正常;

如有报错,可到/root/logs目录查看日志并排查

详见官网;

后端部署就完成了!



二、前端页面部署;

由于我是用了前后端分离,前端用vue3.0+ts 写的,打包压缩后的目录就用nginx启动服务,反向代理;本人对nginx亦是一窍不通,整理众大神文档资料后也算跑起来了,合不合理就不知道了;

1、nginx启动之后默认是代理80端口,所以访问ip可以看到;(上一章已配置完毕)


2、接下来就是新启动一个端口,代理前端页面;我选择8080;

cd /usr/local/nginx/conf

vim nginx.conf

3、依葫芦画瓢添加配置

nginx可以有多个server,那么就再简单添加一个server;并在阿里云安全组添加8080端口;

server {

    listen 8080; server_name localhost:8080;   #监听8080端口

    location / {

        root /usr/local/src/web;  #前端项目目录

        index index.html;

    } #代理前端静态页面

    location /api/ {

        proxy_pass http://127.0.0.1:7001/; #//转发接口 (/api/的请求会转发至http://127.0.0.1:7001/)

        proxy_set_header Host $host:$server_port;

    }

    error_page 500 502 503 504 /50x.html;

    location = /50x.html { root html; }

}

4、将vue打包后放入 /usr/local/src/web

项目部署完毕,此时便可以通过8080端口访问我自己的网页了,也可以通过编辑并存储数据;美滋滋!

你可能感兴趣的:(egg.js+vue.js 云服务器部署 -- 项目部署)