前端项目部署到阿里云服务器

44 阅读4分钟

1. 选择服务器系统

首先刚买了服务器,需要选系统,我选的是CentOS 7.9的Linux系统。

image.png

选好之后,点击开通,恭喜你,你在阿里云已经拥有一台属于自己的服务器主机了~

点击进入我的控制台 > 云服务 > 实例 > 可以查看到当前服务器状态及公网IP(这个就是你的服务器对外的IP地址了)。

image.png

2. 配置安全组

需要配置一下安全组,否则到时候使用公网IP访问的时候会出现访问不到的情况。 安全组 > 创建安全组

image.png

添加安全组:

image.png

配置完列表,必须要有80端口

image.png

3. 绑定域名

如果你购买了域名的话,可以在这里绑定,让它指向你的主机IP就行了。不过要及时备案,否则使用域名打不开页面(会出来提示备案的页面)。 进入域名 > 解析设置 > 添加记录

image.png 添加完成

image.png

这样就完成域名的绑定了。

4. 配置服务器

现在你可以使用远程连接到你的阿里云服务器了。

image.png

但是,如果是第一次连接的之前,需要先修改user的登录密码,如下 进入管理 >

image.png

修改密码

image.png

这一步按照提示操作完成就行。修改完成以后记得重启,大概需要半分钟。

进入远程连接 >

输入远程密码后,会进入服务器命令界面,输入user名和password,user名默认是root,密码是刚刚你改的那个。

image.png

5. 下载Xshell和Xftp

但是,实际上如果每次连接服务器都要这么麻烦的话,那确实挺麻烦的,所以需要借助一个第三方的工具进行远程与服务器连接,有很多,这里我使用的是Xshell和Xftp

image.png

下载并且安装。 打开Xshell,点击新建会话,点击设置

选择协议ssh,填入你的公网IP,端口默认22

image.png

填入你的用户名和密码,这样你就不用每次都要登录了,自动登录。

image.png

以上完成,看到这样就说明连接成功了。

image.png

6. 安装Nginx

服务器已经连接了,但是现在服务器什么都没有,现在想要忘服务器上面放静态资源,像html等等,需要安装静态资源服务器,有Apache和Nginx。我选的是Nginx。

安装nginx

yum install nginx

image.png

然后中途会停一下让你选择,输入y再按回车就行了。最后就是安装成功。

image.png

有这个complete就说明成功了

但是此时你只是在服务器安装了nginx,并没有在远程服务器启动这个nginx的服务。

以下是后面会用到的部分nginx命令:

安装nginx:yum install nginx
看是否有ngnix进程:netstat -anput | grep nginx
查看服务器端口占用情况:netstat -ntlp
nginx启动:nginx
nginx重启:nginx -s reload
nginx -s stop : 快速停止nginx
nginx -s quit :完整有序的停止nginx
查看默认的nginx配置文件路径: nginx -t

启动nginx

命令:nginx,一般输完没有任何的反馈

如果你不确定有没有启动nginx,那么你可以使用netstat -anput | grep nginx这个命令看看有没有nginx的端口占用

image.png

很明显我这里有nginx占用的80端口

image.png

然后在浏览器输入你对外的ip地址。如果页面出现了内容(一般是centos或者nginx页面)就说明你的nginx启动成功了

7.上传静态资源文件

现在开始上传你本地的静态资源文件到服务器,以便外网能访问到。 打开Xshell上面的文件传输,会自动打开已经安装好的Xftp。

image.png

打开后大概就这样子

image.png

接下来的操作就比较简单了,需要放什么文件,直接拖拽过来。服务器的根目录是 /root,你可以建一个目录用来放自己的项目文件,这里我建了一个/web目录。

默认应该有个index.html页面,作为网站的主页。接下来需要修改一些配置。

8. 配置Nginx

现在你的服务器可以被访问了,但是需要在服务器上放置你想被访问的文件,还需要配置Nginx服务器。

修改配置文件

查看默认的nginx配置文件路径
nginx -t

image.png

进入配置文件
vim /etc/nginx/nginx.conf

按shift + i 进入编辑状态,上下方向键控制光标

要改的地方如下:

1.用户改成当前用户 root

image.png

2.配置项目路径

image.png

修改完配置,Ctrl + c 退出编辑,:wq 保存退出。

重新启动服务器

nginx -s reload

接下来,在浏览器地址栏输入你的服务器IP,就可以看到你的项目了。

9. 常用指令

Linux中常用操作命令

vim三种模式:命令模式、插入模式、编辑模式。

使用ESC或i或:来切换模式。

命令模式下::q 退出 :q! 强制退出 :wq保存并退出

• 查看配置:

view /etc/nginx/nginx.conf

• 编辑配置:

vim /etc/nginx/nginx.conf

• 重启配置:

nginx -s reload

• 重启服务:

nginx -s reopen