• 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.总结

  • 相关阅读:
    3配置
    1开机初始化配置
    shell <<EOF
    Sun SPARC Enterprise M5000 启动步骤
    CISCO MDS – Useful ‘Show’ Commands
    oracle 内存不足处理
    mysql 日志类型
    MySQL 学习
    抓取进程中包括其所有线程的iowait时间
    每天网络半小时(MAC数据包在哪里合并的)
  • 原文地址:https://www.cnblogs.com/liutaodashuaige/p/14096450.html
Copyright © 2020-2023  润新知