阿里云服务器初尝试

建站记录

前端小菜鸟，希望能在工作之余想要看mob端运行效果的有气势兼容性效果的时候，能稍稍方便点，于是想到建站。第一次接触云服务器，想要记录建站全过程，便于日后参考。

---

1. 阿里云服务器

1.1 服务器购买

有可能是最近活动还是不知道咋，一年的资源还是很很便宜的，选择了对我来说够用的配置。

1.2 密码重置

付完钱没两分钟短信就发过来提示实例创建成功了，并且提示需要去实例详情中重置下密码。

1.3 控制台登录

先在控制台连接看了下，是可以正常登录的。

2. 远程连接

也不知道Mac用什么样的远程连接工具比较好用，我又是一个懒得利其器，想赶快善其事的懒工，还是说干就干，懒得去研究了，直接在App Store 中安装了PortX，连接倒是很方便，输入了下用户名和密码就连接上了。

3.服务器yum安装

3.1 出现问题

# 安装命令
sudo apt-get install yum

报错信息：
E：Unable to locate package yum

3.2 解决

以下参考文章：https://blog.csdn.net/SH_ke/article/details/118496704

#修改sourcelist
#1. 备份源文件
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
#2. 打开文件，通过vim操作方法添加下面的源
sudo vim /etc/apt/sources.list
#3. 保存退出后运行以下命令，更新源
sudo apt-get update
# 以防失败，用于恢复原list的命令
sudo cp /etc/apt/sources.list.bak  /etc/apt/sources.list

这里的源我只是尝试将阿里云源添加上去了，结果竟然管用了，如果不管用，可尝试其他。

# 阿里云源
deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse

# 网易源
deb http://mirrors.163.com/ubuntu/ utopic main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ utopic-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ utopic-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ utopic-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ utopic-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ utopic main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ utopic-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ utopic-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ utopic-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ utopic-backports main restricted universe multiverse

# 搜狐源列表
deb http://mirrors.sohu.com/ubuntu/ utopic main restricted universe multiverse
deb http://mirrors.sohu.com/ubuntu/ utopic-security main restricted universe multiverse
deb http://mirrors.sohu.com/ubuntu/ utopic-updates main restricted universe multiverse
deb http://mirrors.sohu.com/ubuntu/ utopic-proposed main restricted universe multiverse
deb http://mirrors.sohu.com/ubuntu/ utopic-backports main restricted universe multiverse
deb-src http://mirrors.sohu.com/ubuntu/ utopic main restricted universe multiverse
deb-src http://mirrors.sohu.com/ubuntu/ utopic-security main restricted universe multiverse
deb-src http://mirrors.sohu.com/ubuntu/ utopic-updates main restricted universe multiverse
deb-src http://mirrors.sohu.com/ubuntu/ utopic-proposed main restricted universe multiverse
deb-src http://mirrors.sohu.com/ubuntu/ utopic-backports main restricted universe multiverse

---

当下的个人理解：报无法定位包的错，只是因为源中没有含该包的地址，所以，多加几个试试？

3.3 继续安装

# 安装命令
sudo apt-get install yum

可能会报缺少相关依赖包的错误，按提示挨个sudo apt-get install 即可

4 nginx安装

4.1 徒劳记

本来安装yum是想安装nginx的，结果给我报了这个错，yum repolist all，我也看了，返回了个0，又开始寻找解决方法了。。。
查了一会发现了这个https://blog.csdn.net/weixin_41931602/article/details/83211455，文章中说“centos中使用才可以，这里使用的是Ubuntu，ubuntu默认软件包管理器不是yum，而是dpkg，安装软件时用apt-get你说的网上常见法解决方法，命令改为代码:sudo apt-get install net-tools，这样就安装好了”。
由于Linux知识欠缺，现在还不是特别理解，默默接受，看明白的是，刚刚折腾了一大圈的yum是白装了，于是

sudo apt-get install nginx -y

4.2 nginx启动

此处按照查来的操作进行

# 1. 开启防火墙
systemctl start nginx
# 2. 启动nginx
service nginx start

# ps: nginx重启命令
nginx -s reload
# ps：nginx关闭命令
service nginx stop

4.3 端口开通

nginx启动之后就可以在浏览器中输入公网IP试试能不能访问成功了，我尝试了一下是没反应的，按大佬的说法，需要在阿里云配置安全组规则，进入实例详情->安全组：

后三条是原有的，建议还是自己手动添加点一条出来，按如上规则填写。我先是自己编辑的一条，一不小心更改了原来的规则，导致本地客户端连接不上了，阿里云控制台也连接不上了，然后自己又恢复了原来的，虽然不知道是不是原样的，但好歹连接成功了。。。又是不知道原理的一个地方，再给自己打个问号，路漫漫其修远兮。
此时，重启nginx，再去浏览器中输入公网地址八成就是成了吧，我这边还需要一些配置

4.4 nginx配置

接下来就到了nginx配置的部分了，不得不说，处处是盲区。
nginx实现反向代理的关键在于nginx.conf文件中的配置，首先我们可以看看文件存储在哪里。

whereis nginx.conf

一般好像都是存储在etc目录下的，可以直接用vim打开,自己也可以去看下目录层级。

vi /etc/nginx/nginx.conf

5 上传

5.1 本地文件准备

因为是初次尝试，所以随便初始化了一个react项目，直接npm run build了一下看看效果。

5.2 sftp配置

现在突然觉得之前安装的portx很好用了，ssh连接和sftp上传都可以搞定。
点击右上角的三个点，选择SFTP，配置上传的信息。
配置如下：

1. 第一个tab的配置是有关远程连接信息的，Name似乎随便填就可以，协议就是SFTP，IP地址是阿里云提供的公网地址，端口号正常22（当然，需要在控制台安全组那边配置下该端口）
   
   2.第二个tab的配置如下，填写服务器的登录账号密码即可。
   
2. 最后一个tab填写的是文件信息，需要选择下本地文件的路径和上传到的目标目录
   
   配置完成后，点击connect即可。

5.3 上传

连接成功的话应该展示的是如下窗口，左边是本地选择的目录文件夹，右边是服务器的目录，从这里可以看出我们之前在浏览器中输入IP的时候，使用的页面就是/var/www/html中的这个index.nginx-debian.html文件，所以我也将我的大包文件丢在了这里，自己创建一个自己的目录将文件拖进去即可：

在浏览器中输入 公网IP/build，可以看出其实是访问成功了的，但是还有一点点的小问题需要解决一下。

5.4 解决

先是翻了好些资料，大概是如这位大佬所说解决create-react-app build 后静态资源文件夹(static)路径不对，于是乎照做，未生效。

又翻了好些资料，看到这位大佬的文章关于react 在打包后：“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题，虽然不信，且不理解，但还是试了下，
发现自己把自己坑到了，似乎是因为我在html下面建立了一个二级目录build导致的，给他们挨个挪出来，如图所示：

于是，效果图如下，感觉以上两个需要同时结合生效，长记性了。
—

总结

以上就是初次动手的全程了，虽然也踩坑，总体来说还算是顺利👌