Vue+express项目优化上线（2）

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环境

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

  • 记录一个小坑，访问网站时，网站标签上的小图标未显示，百度后建议等待，第二天恢复正常

6.总结

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liutaodashuaige/p/14096450.html