Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

airchat 打包上线小记 #28

Open
aermin opened this issue Feb 23, 2018 · 11 comments
Open

airchat 打包上线小记 #28

aermin opened this issue Feb 23, 2018 · 11 comments

Comments

@aermin
Copy link
Owner

aermin commented Feb 23, 2018

前言

本次开发我用了三个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
Copy link

node 变量来切换部署环境

@Yinzhuo19970516
Copy link

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

@aermin
Copy link
Owner Author

aermin commented Nov 4, 2018

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

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

@Yinzhuo19970516
Copy link

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

@aermin
Copy link
Owner Author

aermin commented Nov 5, 2018

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

好的~~

@lusu2004
Copy link

lusu2004 commented Nov 7, 2018

真不错!!!

@lusu2004
Copy link

lusu2004 commented Nov 8, 2018

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

@aermin
Copy link
Owner Author

aermin commented Nov 8, 2018

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

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

@lusu2004
Copy link

lusu2004 commented Nov 9, 2018

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

@aermin
Copy link
Owner Author

aermin commented Nov 10, 2018

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

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

@nikki0508
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants