建站记录
前端小菜鸟,希望能在工作之余想要看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,配置上传的信息。
配置如下:
- 第一个tab的配置是有关远程连接信息的,Name似乎随便填就可以,协议就是SFTP,IP地址是阿里云提供的公网地址,端口号正常22(当然,需要在控制台安全组那边配置下该端口)
2.第二个tab的配置如下,填写服务器的登录账号密码即可。
- 最后一个tab填写的是文件信息,需要选择下本地文件的路径和上传到的目标目录
配置完成后,点击connect即可。
5.3 上传
连接成功的话应该展示的是如下窗口,左边是本地选择的目录文件夹,右边是服务器的目录,从这里可以看出我们之前在浏览器中输入IP的时候,使用的页面就是/var/www/html中的这个index.nginx-debian.html
文件,所以我也将我的大包文件丢在了这里,自己创建一个自己的目录将文件拖进去即可:
在浏览器中输入 公网IP/build,可以看出其实是访问成功了的,但是还有一点点的小问题需要解决一下。
5.4 解决
先是翻了好些资料,大概是如这位大佬所说解决create-react-app build 后静态资源文件夹(static)路径不对,于是乎照做,未生效。
又翻了好些资料,看到这位大佬的文章关于react 在打包后:“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题,虽然不信,且不理解,但还是试了下,
发现自己把自己坑到了,似乎是因为我在html下面建立了一个二级目录build导致的,给他们挨个挪出来,如图所示:
于是,效果图如下,感觉以上两个需要同时结合生效,长记性了。
—
总结
以上就是初次动手的全程了,虽然也踩坑,总体来说还算是顺利👌