Vue项目部署到远程服务器并实现自动远程同步项目

清疚 2022-05-18 04:11 915阅读 0赞

使用Vue开发项目时通常是前后端分离的，这样就前后端各有一个地址，用户访问的是前端的地址，即前端路由，前端再向后端地址请求页面数据然后渲染页面。本文简单介绍通过Apache2部署前端项目到服务器，以及如何将本地项目自动推送到远程服务。  
  我的服务器系统版本 ubuntu16.04，如果你的也是ubuntu应该差别就不大。这里我用的服务器是国外的[Vultr云服务器][Vultr] ，平时就随便玩玩(科学上网)还可以，关键是比阿里云便宜太多而且科学上网不会收到警告(竟然是一句广告！)。

--------------------

以下分步介绍服务器部署以及远程同步项目。  
1. 安装Apache2

sudo apt install apache2

无意外的话安装好就自动启动了，浏览器地址栏输入ip或者域名就能够看到Apache2服务的默认页面了。  
Apache2默认访问的文件路径是/var/www/html，会返回该路径下的index.html文件内容给浏览器。  
2.更改服务器访问目录  
  Apache2的配置文件为/etc/apache2/sites-available/000-default.conf。  
vim打开：  
![这里写图片描述][70]  
看到DocumentRoot即为服务根目录，我们修改为我们想要的目录同时增加权限相关配置（Directory标签中的内容，如果没有权限配置，访问会被拒绝）：  
![这里写图片描述][70 1]  
这里我们用一个创建一个简单的index.html文件来测试目录更改是否成功：  
![这里写图片描述][70 2]  
在浏览器访问ip或者域名：  
![这里写图片描述][70 3]  
访问成功！  
3. 设置免密ssh连接远程服务器  
  以上步骤简单地搭建了web服务，但是要把我们自己的项目放到服务器上还是比较不方便。最开始我是通过git来传输，本地build后把项目push到github，然后再在远程服务器将代码pull下来并且把服务访问路径修改为build后的/dist路径。这种方式太过麻烦，后来请教了别人学会了更好的方式。  
  对于一个Vue项目，通常build后的代码目录为/dist，所以我们只要把/dist复制到Apache2服务的访问目录即可。接下来看看怎样推送本地代码到远程服务。  
  这里使用linux的rsync命令（如果是windows系统的git Bash或者PowerShell，可以自行百度怎么安装该命令），rsync命令可以将本地文件与远程文件对比，传送文件中不同的部分，因此同步速度杠杠的。关于rsync命令详细用法，可参考[linux命令大全][linux]。  
  这里rsync通过ssh方式向远程服务器同步文件，为了快捷，我们设置ssh免密方式传输：  
  ①本地生成ssh公钥：

ssh-keygen

如果已有密钥，命令执行过程中会询问是否覆盖，可以使用已有的密钥，也可以覆盖生成新密钥。命令会在~/.ssh文件夹下生成密钥对id\_rsa和id\_rsa.pub，分别为私钥和公钥，我们只要把公钥放到远程服务器的~/.ssh/authorized\_keys里即可实现本机和远程服务器的ssh免密连接。  
  ②将本机ssh公钥放到远程服务器上。  
  你可以试试rsync（更好的办法是使用ssh-copy-id指令，不过这里为了介绍一下rsync），rsync 的基本使用格式为rsync (-options) srcfile destip:destfile，options是可选的：

rsync /home/lushg/.ssh/id_rsa.pub lushg@45.76.166.80:/home/lushg/.ssh/authorized_keys

![这里写图片描述][70 4]  
  可以登录远程服务器查看同步是否成功。  
现在再使用ssh连接远程服务器，顺利的话可以不用密码了。如果遇到下面的报错：

sign_and_send_pubkey: signing failed: agent refused operation

然后依旧要求输入密码，原因是生成的密钥没有加到ssh agent，此时只需在本机执行以下命令：

ssh-add ~/.ssh/id_rsa

然后重新执行即可。  
  注: 复制公钥到远程主机更好的方式为ssh-copy-id指令，该指令将本地公钥追加到远程主机的.ssh/authorized\_keys文件中，使用方式如下。

ssh-copy-id -i ~/.ssh/id_rsa.pub username@ip

1.  自动推送本地代码到远程服务器  
      现在回到Vue前端项目，怎样构建完成自动同步到远程服务器？我们只需要在项目目录下添加一个sh脚本remotesync.sh，把构建命令、同步命令写入脚本（指令各选项含义可以参照指令详情）：  
    remotesync.sh

#!/bin/bash
    yarn run build
    rsync -avr --delete-after dist/* lushg@45.76.166.80:/home/lushg/www

注意把服务器地址、文件路径对应替换为你自己的，修改文件执行权限：

chmod a+x ./remotesync.sh

./remotesync.sh执行脚本即可实现远程同步，以后需要构建并远程的时候就可以一键完成啦～～

[Vultr]: https://www.vultr.com/?ref=7389830
[70]: /images/20220518/f442324cc0ab467895144dc7241a511e.png
[70 1]: /images/20220518/b18392473e0f41dd918324c882c966ff.png
[70 2]: /images/20220518/c65a7538e93940b791fa0c4e16a1ead8.png
[70 3]: /images/20220518/b3119944e8de40a490fcddcb5c78881d.png
[linux]: http://man.linuxde.net/rsync
[70 4]: /images/20220518/dd39e6c7c297479eb2ae9b7f95051c9b.png