1、安装nginx
安装nginx其实非常简单的,常见问题1:如果自己买的服务器使用apt-get命令报错,那么先输入 apt-get install update 命令,更新一下就行了。关于安装nginx,推荐这篇博文,我之前第一次安装找了很多文章,这篇非常棒:nginx安装
2、前端上线
写在前面,推荐大家安装MobaXterm,点击这里前往官网下载。
下载免费版的就行,这个软件很好用,上传文件非常方便,自己要把前后端的文件传到服务器的话,这个文件可以很轻松搞定。
与服务器建立连接:
依次点击下图红框,输入服务器IP地址就连接成功,输入用户root以及服务器密码就可以了。
部署前端:
在项目的vue终端运行npm run build打包项目,然后传到服务器里。
解压后进入如图nginx安装目录下的conf文件夹里,将nginx.conf文件复制一份,我这里命名为demo.conf,进入该文件,修改如下图信息。
将root后的路径改为你传到服务器里的前端项目的路径。
常见问题2:当你把前后端项目都部署完成时,第一次进入页面,项目正常显示,如果你一刷新页面,页面报404错误的话,加上 try_files $uri $uri/ /index.html; 既可以完美解决。
运行前端项目:
按如下命令即可运行项目,如果想要停止该项目,在第三条命令后加上 -s stop即可。
但我平时经常用的命令是 fuser -k 80/tcp,即可关闭80端口的进程。
3、后端上线
注意:把前端部署到服务器前,肯定是要将前端中的get、post的请求地址换成服务器的ip地址的,不然是部署上线后是请求不到数据的。
后端上线之前的准备工作:
1、安装数据库:安装Mysql
2、安装后把本地数据库导出为sql文件传到服务器里,如何导出数据库: 导出数据库
3、然后依次执行下面操作:
1) 登录mysql:mysql -u root -p
2) 创建和本地数据库一样名字的数据库:create database ‘名字’;
3) 使用该数据库: use '名字';
4)导入刚才传入的.sql文件:source ‘sql文件的路径’;
至此,所有准备工作已完成。
常见问题3:可能有人把后端传到服务器后,会把连接数据库的代码的host改为服务器的ip地址,千万不要改。保持127.0.0.1就行。
运行后端
和vue中运行后端一样,直接 node app.js 就可以,当然提前下好nodeJs,这个非常简单,大家可以去查一下怎么下载。
至此,项目成功上线。
4、优化
直接node app.js的话,是不能退出这个命令的,一退出后端就不能生效了,但是我们也不可能就这样一直把电脑开着让node app.js这个命令一直运行.
pm2就是用来解决这个问题的,我们用pm2可以把后端一直挂载起来,这样我们就算把电脑关了这个项目也是一直在运行的。
下载pm2:npm i pm2 -g
启动项目:pm2 start 'app.js所在地址' --name ‘别名’
查看运行项目: pm2 ls
停止项目:pm2 restart '刚才给项目起的别名'
删除项目:pm2 delete ‘刚才给项目起的别名'
如图,这就是我挂载好的后端,status为online就表示运行中,第一个红框就是刚才起的别名。
现在全部大功告成了,第一次会很繁琐,要下好多东西,可能还会碰见许多错,不过第一次部署成功后,之后熟悉之后再部署就是几分钟的事了。