Mac 在阿里云ECS服务器部署前端项目流程分享

待我称王封你为后i 2021-12-22 09:23 670阅读 0赞

> ps: 这不是一个详细完整的教程，只是本人对学习如何将本地部署到远程服务器的记录并做个分享  
> 因为各人的项目不同、系统不同、环境不同，用下面的这套流程不一定能跑的通，不喜勿喷，如有不同见解可在评论区处讨论交流~
> 
> 下面附本人环境系统：本地系统 `macOS`，远程服务器系统 `centos 7`，要部署的是 `react + koa` 的项目

### 1. SSH 远程连接服务器 ###

*  首先进入终端，输入 `sudo su -` 回车；
 *  然后输入 `ssh -p 端口号(一般为22) 用户名@ip地址`

例如 `ssh -p 22 root@172.19.38.92`

> 如果没有另外创建用户，linux系统的初始用户为 root

*  会有 `Are you sure you want to continue connecting？` 的选择 选择 yes
 *  然后输入密码，就ok了~

此处如果忘记了 root 的密码，可以在 ECS 控制台修改密码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]

此处不要和下面的远程连接密码混淆，那个是网页远程连接的6位密码

> 当然这是最原始的方法，每次都要敲下长长的命令，还有ip地址需要记忆，这种体验可不太好，有两种方法可以优化体验：一是使用 SSH 客户端，比如 Mac 上就有 `Shuttle`、`FinalShell`、`Termiuns` 等几款；二是通过配置 `~/.ssh/config`，缩写 ssh 命令

#### 配置 ~/.ssh/config ####

vim ~/.ssh/config

编辑配置文件，下面是配置文件的格式

Host server1                        # alias 关键字
    HostName 172.19.38.92               # 主机地址
    User root                           # 用户名
    IdentityFile ~/.ssh/id_rsa.pub      # 认证文件 ssh 公钥
    Port 22                             # 制定端口

这样配置后，可以大大缩短 ssh 的命令，而且不用去记忆ip地址

ssh server1

就等价于

ssh -p 22 root@106.14.182.248

在此基础上，还可以配置多站点缩写，server2、server3…

### 2. 将项目传到远程服务器 ###

#### 2.1 使用 scp 上传下载文件 ####

从本地上传文件到服务器

scp -r 本地文件路径 服务器账号名@服务器ip:想要保存的路径

从服务器下载文件到本地

scp -r 服务器账号名@服务器id:文件路径 本地保存路径

不过在我的实践下这种方法还是不太好，因为第三方库许多文件都要一一上传上去，因为文件数量很多，速度很慢(虽然我怀疑这有筛选exclude的功能)

#### 2.2 使用 git 部署项目 ####

首先在服务器上输入 git，看看系统有没有安装 git

我的阿里云ECS服务器初始带着 git，然后问题就简单了，平常开发本地项目时就上传到 github 远程仓库中，然后部署时再从远程仓库中将项目拉到远程服务器上

> 关于git的基本操作，建议学习[廖雪峰的git教程][git]

这里还有一个要在服务器生成 SSH 公钥，在 github 添加公钥才能从远程仓库拉项目下来，具体教程看下面的连接

[服务器上的 Git - 生成 SSH 公钥][Git - _ SSH]

此种方法可以通过设置 `.gitignore` 文件忽略上传下载部分文件，大大提高效率，而且在后面更新重新部署的时候利用 git 的特性，只更新有变化的文件。

### 3. Centos7 安装 Node.js 和 npm ###

因为是 JS 的项目，需要安装 `Node.js` 和 `npm`，首先使用 `node -v` 和 `npm -v` 检查一下是否已安装

如未安装，则使用 yum 命令进行安装

安装 Node.js

sudo yum install node.js

安装 npm

sudo yum install npm

然后通过检查版本号的方式，检查一下是否安装完毕

### 4. 检查端口占用情况 ###

此次要部署的项目是 `react + koa` 的前后端项目，前端服务会由 `webpack-dev-server` 占用 8080 端口运行，后端服务会占用 3000 端口运行，所以在项目运行前有必要检查两个端口的占用情况。

使用 lsof 检查端口占用情况，使用如下：

lsof -i:8080
    
    lsof -i:3000

在本次检查时，发现 8080 端口被 java 给占用了，所以改一下前端的配置文件就好了

![在这里插入图片描述][20190629141401995.jpg]

然后分别运行前端服务、后端服务就Ok了

### 坑1 Mac、git对大小写不敏感引起的问题 ###

由于 Mac、git对文件名大小写不敏感，所以出现了不少例如我在代码写的引用是 `Menu` 文件夹，然而真正的文件夹是 `menu`，这就会在对大小写敏感的linux系统启动服务时发生问题

此外，git 对文件名大小写不敏感的问题，还有另外的问题，此处详情可以移步：[https://blog.csdn.net/zwkkkk1/article/details/94154727][https_blog.csdn.net_zwkkkk1_article_details_94154727]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]: /images/20211220/8cecfb0d5df54c75a09fdd50120796dc.png
[git]: https://www.liaoxuefeng.com/wiki/896043488029600
[Git - _ SSH]: https://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E7%94%9F%E6%88%90-SSH-%E5%85%AC%E9%92%A5
[20190629141401995.jpg]: /images/20211220/dd1e066a2f644b85a1806fc47e2c9ae4.png
[https_blog.csdn.net_zwkkkk1_article_details_94154727]: https://blog.csdn.net/zwkkkk1/article/details/94154727