首页 > 其他 > 详细

Vue+express项目优化上线(2)

时间:2020-12-07 14:29:07      阅读:35      评论:0      收藏:0      [点我收藏+]

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

Vue+express项目优化上线(2)

原文:https://www.cnblogs.com/liutaodashuaige/p/14096450.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!