使用服务器部署vue+axios+node.js+mysql的项目(借助宝塔面板完成部署)

1. 购买服务器


简单说一下,企业中使用最多的都是centos的系统,至于版本,不要选择太低,好像在宝塔面板中处理centos5.x的版本非常费劲。因为我买的时候没有截图,我这边就重新截图了一张活动的的价格

2. 设置root密码


点击最右边的更多,重置系统密码。 这个密码你要记住,后面是有用的。

注意:密码修改过后需要重启服务器之后才会有效!

3. 配置宝塔面板

3.1 下载宝塔

注意:宝塔他不是一个实实在在的软件,而是一个可视化ui网页,我们点击宝塔官网首页的linux版本下

往下翻,你会看到很多命令,因为我们选择的系统是centos的版本,所以我们需要使用的是这个centos的安装命令。


我这边使用的是万能安装脚本:

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec


然后登陆你的云服务器,用户名为root,密码为你之前设置过的密码,记得设置完密码之后要在重启服务器之后再进入,不然密码不会生效的。输入完点击确定就进入了该云服务器,然后再命令行中输入在宝塔中看到的centos系统的命令,然后回车,执行该命令,等待下载完成;之后一直按y 就可以了

我这边使用的是finalShell 其他软件都可以

确认安装完之后,你最终会在命令行工具的最下面几行看到一个网址还有用户名密码这些信息

注意:有一点非常重要,这里生成的网址的端口号为8888,但是如果你直接访问的话是会被拒绝的,因为服务器安全开放口上面我们还需要做一些配置  需要开放端口

4. 使用宝塔面板来帮助我们部署项目

我这边下载了pm2 去管理node  然后下载了推荐安装的 反正你需要什么安装什么就可以了

4.1 项目文件上传

首先我们初次登录的时候会弹出一些选择软件给我们,这些都是可以安装的,当然你也可以很方便的卸载掉它,你也可以选择不安装(我没有选择安装)。然后进入文件栏中,系统会提示你安装Pure-Ftpd ,你就安装即可,编译安装和极速安装最好选择编译安装。安装完之后就可以进入到文件页面,这里你看到的页面就是你的云系统中的文件目录。

找到根目录下的www -> wwwroot 在这里创建一个文件夹,将你vue项目打包后的dist文件夹里面的东西放进去,注意:这里的wwwroot目录下的文件夹里的东西就是你项目的入口,所以你需要将dist文件夹里面的东西放在这个文件夹中,像我这样。


4.2 下载nginx并修改配置文件


设置server_name为你的云服务器的IP地址,listen为80,root为刚才文件导入的地址。现在你访问http://ip地址,应该就能展示到你的项目了,但是接口是肯定请求不到的。这边我部署之后搞了大半天 发现部署之后请求接口就是访问不了 最后发现需要在 这边设置 我这边里面有api 连接 所有前端设置好需要在这边额外设置一下

4.3 数据库

在宝塔里面创建数据库

我这边项目是需要在数据库里面增加一些字段 :如果说你们需要跑我这边的项目 需要在数据库增加这些字段

username  account  password repeatPass email phone card birth  sex这些 

account是账号 password是密码

项目地址 github:https://github.com/chen196910/CPblogAdmin 

前端后端都在这里面 具体可以点击进去查看和部署


4.4 下载pm2管理器并设置node服务器

具体参考连接https://blog.51cto.com/u_16105456/6260462进行配置 

配置完成之后 

在部署node 之前 需要将我这边的文件npm install 因为我里面引用了express 需要进行下载 不然会造成缺少

注意:因为mysql也有端口,所以需要在ECS控制台中按前面的方式继续配置3306这个端口的安全组

设置完这些之后在PM2管理器中启动你的node服务器

如果你的node启动没有像我这样的效果的话,可以点击左边的日志管理,在日志管理中最上面有一个路径,点进去会看到pm2中的报错的文件,你可以打开看看是否出了问题。

4.5 设置反向代理

设置完这些之后,则需要最后一步,设置反向代理

打开nginx的设置,找到配置文件,在server花括号的里面,加上这句代码

location /api/ {   proxy_pass http://127.0.0.1:3000/api/;     }

这里面的地址改成你node入口文件启动服务器的地址即可。

改了这里之后,需要改掉你项目源代码中的axios部分的baseURL(如果你设置的话就只用改这里即可)。拼接上这里的api三个字符串,然后localhost改成你的云服务器的ip地址即可,下面是我的配置 


然后重启nginx,凡是修改了配置文件就需要重启。现在应该就能够正常的通过你的ip地址访问你的项目了

这边我的项目在线地址是:http://admin.chengpeng.store/ 我这边使用了域名 在前端部署的时候添加一下就可以了 

域名这边是需要审核的 还是比较麻烦的 大概需要半个月 其他的都还好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容