前端项目线上部署过程（Linux+nginx+阿里云ECS）

线上部署过程

Linux + nginx

  • nginx常用指令
nginx #启动nginx服务器
nginx -t #检查nginx配置文件语法
nginx -s reload #在不关闭nginx服务器的情况下让修改的配置文件生效
nginx -s stop #停止nginx服务器
ps -ef|grep nginx #查看nginx服务是否在运行
  • 首先肯定是要在Linux上下载nginx，这里用的是Ubuntu的系统，就不采用源代码的方式安装了，那样比较麻烦，就这样吧：
sudo apt-get install nginx
  • 下载完之后，在/etc/nginx/下就放着nginx的所有文件，大部分也不太需要改，主要是修改里面的总配置文件 nginx.conf
  • nginx的配置文件语法可以上网搜搜，修改以下最上面的用户 改成root，看到http里有个如下语句，这就是说把/root/nginx/下所有以conf为结尾的配置都导入进来，这里的地址就是线上部署用到的配置文件存放的地址：
include /root/nginx/*.conf;
  • 这里在/root下创建一个nginx文件夹，来放要放到nginx里的文件各种文件
  • nginx文件夹下有book.conf文件夹来放配置 和 upload文件夹里面放要放到niginx里的资源文件，其中book.conf内容如下：
server {
        listen 80; # 监听80端口
        server_name localhost;
        root /root/nginx/upload/book; # 根目录
        autoindex on; # 访问根路径时是否显示目录
        add_header Cache-Control "no-cache, must-revalidate"; # 设置缓存机制
        location / {
                add_header Access-Control-Allow-Origin *; # 同源策略
        }
}
  • 这样配置好之后，每次有用户通过80端口访问该IP地址，nginx就会将请求转发到线上部署的地方（也就是根路径设置的地方）
  • 根路径里面放的就是ebook前端项目文件，注意这个项目文件要经历以下几步：
    • 用GitHub上下载最新的前端源码（git clone）
    • 用 cnpm i 进行依赖的安装，这是由于在GitHub上传的时候我们是不会去传 node_modules的
    • 进入下载好的项目文件，用cnpm run build将项目文件打包，将打包生成的dist目录下的内容放到nginx服务器上 mv dist/ /root/nginx/upload/book，这样在book文件夹里就有打包之后的前端文件了，加上之前在 book.conf 里设置了根目录，访问IP就能看到前端页面了！
  • 后端代码的话也是先从GitHub上把源码拷下来，然后用 node 去开启服务器（要先安装node哦）
  • 其实线上发布最要注意的点就是，开发环境和生产环境的地址了，最好是设置一个专门的控制环境变量的文件，在每次设置固定地址的时候都判断一下当前是哪种环境（如开发环境基本都用localhost，生成环境都是线上接口）

filezilla

  • 这是个来管理nginx上资源的软件
  • 点击左上角新建站点，输入好主机等信息后，连接成功后直接将要上传到nginx里的文件拖进来即可

mysql

准备操作

  • 在Ubuntu上安装mysql
#命令1
sudo apt-get update
#命令2
sudo apt-get install mysql-server
  • 登录用户：mysql -u root -p

连接数据库

  • 首先要在阿里云上添加安全局，把3306开放出来；
  • 在服务器上登录mysql后，创建新的用户，mysql连接哪个地址就要将其注册上去(%代表root可以被所有ip都使用)： 
create user 'root'@'%' identified with mysql_native_password by 'password';

  • 在本地数据库管理工具navicat上新建数据库连接，主机名输入IP；

  • 连接成功之后会发现底下没有想要的数据库，这是因为还没有给root用户开放访问权限，输入下列语句，即开放所有库给root这个用户，完成之后关闭连接重连即可：

grant all privileges on *.* to 'root'@'%';
flush privileges; #刷新 使其生效
  • 之后再导入原来的数据库文件即可，同时还要修改后端代码，将原来连接数据库输入的信息（主机名、用户名、密码）修改为线上的，完了之后本地先启动服务器测试一下 在地址栏输入http://localhost:3000/book/list若可以获取到再提交到线上；

一键部署脚本

  • 每次在本地修改完前端/后端代码时都需要执行一系列操作，比如重新打包重新放到nginx上等操作，每次都执行这种复杂且重复的代码未免有些枯燥；
  • 写一个shell脚本，里面放一堆命令，最后只需要执行这一个shell脚本就能使所有的更新自动完成！
  • 其实就是写一个 update.sh 文件，里面把所有命令都写上，最后给这个文件可执行权限：chmod +x update.sh即可。
posted @ 2020-11-17 01:13  TRY0929  阅读(1109)  评论(0)  编辑  收藏  举报