aermin/blog

airchat 打包上线小记

aermin opened this issue · 11 comments

aermin commented

前言

本次开发我用了三个git分支，分别是主分支master ，开发分支dev ， 线上分支online，
如果你要fork到你的本地跑，最好是fork master分支 。

然后最好把node升级到v8.0.0版本，以免版本问题造成一些报错。

步骤

1.购买，部署配置云主机

这里你需要完成购买一个云主机（我选的是centos7.2，不同版本部署方式可能不一样），登陆你的云主机，部署nodejs，部署mysql，安装pm2

如果你有了云主机部署配置经验请略过，没有的话可以参考下我的一篇文章 记录下node项目部署上线的过程及坑

这边不再细讲

2.修改些master分支的代码，然后打包前端代码

  • a: 修改webpack的路径配置

image

  • b: 把soket链接的ip改成你云主机的ip

image

  • c: 注释掉axios.defaults.baseURL

image

ps: b和c 两个步骤是根据我上线时遇到的bug，如果你们有更好的解决方法，恳请告知。

  • d:执行以下代码进行打包
npm run build

打包你的前端代码，生成一个dist文件夹，这里放着前端打包生成的静态资源。

image

3.添加koa2静态资源管理

网页存储在服务器，是静态资源的形式存在的，你可以把静态资源托管到其他的服务器上（比如github静态服务器），也可以和后端文件放在同一个服务器，让koa2去管理静态资源。

以下是步骤

a: 切换到server 文件夹 然后下载koa-static中间

cd server
npm install koa-static -s

image

b: 在 airchat/server/index.js 文件中添加以下几行代码

const static = require('koa-static') //静态资源服务插件
const path = require('path') //路径管理


// 配置静态资源
const staticPath = '../dist'
app.use(static(
	path.join(__dirname, staticPath)
))

4.在云主机中添加你的数据库

这边默认你已经完成了步奏1在云主机中对数据库的部署。然后你可以用多种方式添加你本地sql的文件到你云主机的数据库中。

这边讲下我是用的方式

我本地下了一个mysql的客户端，方便操作使用。（mac环境下）
image

接着用本地mysql客户端连接centos云主机的数据库，具体怎么操作可参考我的这篇文章本地mysql客户端连接centos云主机的数据库

然后就可以在本地操作云主机的数据库了
image
把sql文件import进来即可

5. 上传你的项目文件到云主机

上传项目文件到云主机我用的是FileZilla 这个ftp可视化客户端，去官网下载安装，然后输入主机名（你买的云服务器的公网ip） ，用户名（默认是root），密码（你设的云服务器密码），还有端口22 。然后连接。
想上传啥直接拖拽就行了，记得先把项目里的node包删掉，不然文件数量
分分钟上万。。。。上传到猴年马月。

image
image

正确姿势 -> 删除node包，在云服务器中的airchat/ 路径 和 airchat/server中执行

npm i

6.运行你的项目

步骤1中你安装好了pm2（npm install -g pm2）

这里只需要在终端执行(路径 server/ )

pm2 start index.js

这时在浏览器输入你云主机的ip或者对应的域名，即可看到你部署的线上网站。

jackieli123723 commented

node 变量来切换部署环境

Yinzhuo19970516 commented

fork了你的项目，成功的运行起来了，但是在登录那块总是显示登录名错误，您知道是什么问题吗

aermin commented

fork了你的项目，成功的运行起来了，但是在登录那块总是显示登录名错误，您知道是什么问题吗

可否把报错内容截图发一下呢？工作忙好久没去弄这个项目了

Yinzhuo19970516 commented

已经解决，是我的数据库文件没有配置好

aermin commented

已经解决，是我的数据库文件没有配置好

好的~~

lusu2004 commented

真不错！！！

lusu2004 commented

我的服务器是只开https 端口 443， 不开3000端口。 想通过proxy做，怎么设置都不行 （没有用ngix , 用的caddy)

aermin commented

我的服务器是只开https 端口 443， 不开3000端口。 想通过proxy做，怎么设置都不行 （没有用ngix , 用的caddy)

Https 的没搞过不清楚哦，不过你怎么设置都不行有没有可能是因为你服务器是国内的，然后域名没有备案，没备案的话貌似没办法代理到默认端口，我之前想用3000端口反向代理80端口就没起作用。亲供参考，踩完坑求分享 哈哈哈😄

lusu2004 commented

国外服务器啦，本来是一台闲置vps，想装个聊天室玩玩。没想到需要自己成为专家先😄，得再修炼一番。
为何配合caddy的https服务器，我在想 npm run build 生成 dist目录后， cp -r dist/* /var/www ; (var/www 是https的root目录）。然后后面的websocket 用proxy 转到localhost:3000。 但是只是个想法， 估计code 得大改吧。。。可能远远超过了我的能力。。

aermin commented

国外服务器啦，本来是一台闲置vps，想装个聊天室玩玩。没想到需要自己成为专家先😄，得再修炼一番。
为何配合caddy的https服务器，我在想 npm run build 生成 dist目录后， cp -r dist/* /var/www ; (var/www 是https的root目录）。然后后面的websocket 用proxy 转到localhost:3000。 但是只是个想法， 估计code 得大改吧。。。可能远远超过了我的能力。。

哈哈哈，有时间可以多折腾折腾，这是我当时用ngix时写的文章，#11

nikki0508 commented

Screenshot (193)
i'm getting this error in register and login page