Vue+express项目优化上线(2)
目录
1.购买服务器以及域名
- 域名:阿里云=>开发者成长计划=>选择购买域名的类型=>搜索想要的域名(有些特定词汇很贵)=>下单=>填写信息=>个人信息验证备案=>等待
- 服务器:阿里云=>开发者成长计划=>轻量应用服务器=>选择系统镜像CentOS 7.3=>下单
- 关于服务器:系统镜像是纯净版的系统,应用镜像是安装了部分软件的系统,我选择使用系统镜像,手动搭建环境。差别可以参考知乎文章
2.绑定域名指向主机IP
- 进入服务器控制台=>站点设置=>绑定域名=>解析域名到公网IP=>按照阿里云流程进行备案
3.防火墙设置
- 进入服务器控制台=>安全=>防火墙
- 添加规则,打开项目必须的端口,常用的有80、443、22、3306
4.配置服务器
4.1 设置root账号密码
- 进入服务器控制台=>服务器运维=>远程连接=>设置密码=>等待重启服务器
- 尝试使用阿里云的远程连接,连接正常,进入服务器命令界面
4.2 下载Xshell和Xftp简化远程连接服务器
- 使用这个地址申请免费版本Xshell&Xftp
- 等待下载地址发送至你的邮箱,下载并安装
- 打开Xshell新建会话=>选择ssh协议=>填入服务器的公网IP=>端口默认22=>用户身份验证=>填入用户名和密码即可自动登录
- 使用Xshell的命令窗口来操作服务器
4.3 部署Nodejs环境
- 此博客非常详细,帮助很大参考博客
- 辅以此篇博客,安装成功参考博客
- 此处获取各个版本nodejs文件nodejs官方资源
4.4 安装mysql8.0
-
选择使用与本地数据库同版本
-
流程较长,务必参考博客
-
按步骤走,在初始化mysql数据库时遇到报错
mysqld --initialize; mysqld: error while loading shared libraries: libaio.so.1: cannot open shared object file: No such file or directory
-
解决方法:# yum install -y libaio //安装后在初始化就OK了
-
关于防火墙部分的步骤可以省略,使用阿里云可以直接添加安全规则,打开所需的3306端口即可使用sqlyog成功连接
4.5 安装nginx
- 安装:yum -y install nginx
- 启动:service nginx start
- 测试:直接访问服务器IP,打开欢迎页面
4.6 安装pm2用以守护node进程
- 安装:cnpm install -g pm2 //全局安装pm2
- 测试:pm2
5.部署项目
5.1 迁移数据库
- 使用sqlyog可视化数据库工具,连接本地与服务器端mysql数据库
- 右键本地需要迁移的数据库=>将数据库复制到不同的主机/数据库
- 将本地服务器复制到服务器端
5.2 上传前后端项目文件
- 将前端项目中的请求地址,根据上线情况自行修改,npm run build 打包获得dist文件
- 通过Xshell命令行窗口上方的小图标即可打开安装好的Xftp
- 使用xftp在服务端/root目录下新建一个XXX_app文件夹
- 将本地的dist文件夹和后端server文件夹拖入服务器新建的文件夹
5.3 配置nginx进行反向代理
-
路径:/etc/nginx/nginx.conf
-
cd /etc/nginx
-
vim ./nginx.conf //按shift + i 进入编辑状态,上下方向键控制光标
-
我的主要修改内容
//修改user为root user root; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; //server部分配置代理 server { listen 80 default_server; listen [::]:80 default_server; server_name localhost; #如果你的站点绑定了域名,server_name填写你的域名 # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; #此处代理静态页面请求 location / { root /root/psms_app/dist; index index.html index.htm; } #此处代理发送给后端的请求 location /api/ { proxy_pass http://localhost:3000/; } error_page 404 /404.html; location = /404.html { }
-
修改完配置,Ctrl + c 退出编辑,:wq 保存退出
-
vim三种模式:命令模式、插入模式、编辑模式。使用ESC或i或:来切换模式。 命令模式下: :q 退出 :q! 强制退出 :wq 保存并退出
-
重启nginx服务:service nginx restart
-
此时访问网站应展示前端项目
5.4 pm2启动后端项目
-
查看当前管理的应用列表:pm2 list
-
cd 进入你的后端项目文件夹中
-
启动项目:pm2 start ./项目入口文件 --name 一个别名
-
此时前后端项目应该已经完全上线
-
//pm2的常用指令 pm2 start ./项目入口文件 --name 一个别名 pm2 list pm2 stop id或name pm2 delete id或name
-
记录一个小坑,访问网站时,网站标签上的小图标未显示,百度后建议等待,第二天恢复正常