前端在服务器部署测试环境

2,025 阅读4分钟

作为一个有志向的前端,肯定不能只会写业务代码的,git push就完事了。 后端同学就不用看这文章了,so easy

  • 你得知道怎么部署前端代码到服务器,方式有几种(测试环境)
  • 你得知道凡事要先ping IP||域名 看看好不好使
  • 你得知道接口要curl 看看好不好使
  • 你得知道不申请VPN可以使用跳板机
  • 你得知道服务器ng的conf配置文件在哪, 都配置什么
  • 你得知道服务器是不是能git pull 代码
  • 你得知道过程有点麻烦的时候怎么写脚本

总体思路是这样的,凡事先检测行不行,再去想怎么做,再去想优化

前端部署方式分为2种

方式一: 上传静态资源

1. 登录服务器

登录服务器 ssh root@10.244.4.41 密码:问你领导

如果登录不上,就ping 10.244.4.41检查下,不通的话问下给你服务器地址的人为什么,如果需要VPN 就 找相关运营同学申请VPN 或者使用跳板机

跳板机就是个服务器,你没有就问你领导,然后配置公钥的话可以免密登录 下面框里的就是公钥,如果有人问你要,就给他这个。

如果是通过跳板机登录,就ssh app@跳板机IP,然后在跳板机上 ssh root@10.244.4.41

如果要求你在work用户下,就要su - work ,记得要你们自己的按照要求:比如在root下重启, 在work操作

2. 上传静态文件到指定目录

  1. vue npm run build 打包出dist文件夹压缩成dist.zip
  2. 在项目的根目录(本地, 不是服务器)下执行
    scp dist.zip root@10.244.4.41:/data/app/xxx
  • scp:上传命令
  • dist.zip : 如果不是在项目的根目录下, 要输入绝对路径(pwd可查看)
  • root@10.244.4.41 : 服务器地址
  • :/data/app/xxx : 上传到 服务器上的 指定目录 先看下服务器上的目录

3. 在服务器上进入到/data/app/xxx文件夹中查看并解压dist.zip

如果是通过跳板机登录的, 就先上传到跳板机,再从跳板机上传到指定服务器

服务器上有很多用户 su - 用户名 可以切换,exit是退出,root是超级管理员,home下的普通用户不能su到root,但是root可以su到普通用户

ps -ef|grep nginx 可以查看nginx的进程

这样你就可以看到nginx配置的conf 放在了哪里

4. 配置conf:域名,静态资源指向等

前端一般配置下面👇这个就可以了

最开始我配置里还写了指向后端测试域名的匹配,后来改成在代码中区分了

方式二: git pull 拉代码

想要实现在服务器上和本地一样 git pull

1.服务器装有git环境, git --version来验证

在服务器上执行上面命令,查看服务器

2.配置了git的用户名和密码,并且这个用户名和密码有权限能pull代码库

git config --global --list 查看user.name,user.email等

也可以在项目的根目录下配置

3. 写脚本

像在本地开发一样, git clone 代码到服务器文件夹里

在服务器上写个脚本xx.sh
在运行之前可以查看下分支对不对 git status

第一次git pull 会提示输入账号密码, 以后就不用了,在根目录~下`cat .git-credentials `会有一个https://用户名:密码@git.oschina.net

总结:

以上就是前端部署测试环境的2种方法,如果你半路接了一个项目,让你迁移服务,你也不要慌:

  • 找到服务器,确认可以登录(问后端)
  • 确认他们是上传静态资源还是git pull的部署方式(自己查看检测下)
  • 确认是否有conf配置文件(找下路径)
  • 检查conf文件域名,静态资源指向路径等是否需要更改

一般迁移期间需要改动就是:后端的域名更改了,前端页面的访问域名更改了,前端的部署从A 机器到了B机器

方式一sh脚本:

稍后