您的当前位置:首页新手第一次部署前端项目到阿里云服务器详细步骤(CentOS系统)

新手第一次部署前端项目到阿里云服务器详细步骤(CentOS系统)

2021-07-24 来源:乌哈旅游
新⼿第⼀次部署前端项⽬到阿⾥云服务器详细步骤(CentOS系统)趁着双⼗⼀阿⾥云服务器的优惠,我买了⼀个服务器。220三年,真的超划算^_^,虽然性能上有些限制,不过对于我来说,已经够了。然后,开始了个⼈博客⽹站的创造之旅~记录⼀下阿⾥云服务器配置、部署的过程。

1. 选择服务器系统

⾸先刚买了服务器,需要选系统,我选的是CentOS 7.2的Linux系统(⼤神都是使⽤的Linux,我不是⼤神,就跟风⼀下下)。

选好之后,点击开通,恭喜你,你在阿⾥云已经拥有⼀台属于⾃⼰的服务器主机了~

点击进⼊我的控制台 > 云服务 > 实例 > 可以查看到当前服务器状态及公⽹IP(这个就是你的服务器对外的IP地址了)。注:公⽹IP与私有IP的区别,建议阅读这篇:

2. 配置安全组

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

添加安全组:

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

3. 绑定域名

如果你购买了域名的话,可以在这⾥绑定,让它指向你的主机IP就⾏了。不过要及时备案,否则使⽤域名打不开页⾯(会出来提⽰备案的页⾯)。

进⼊域名 > 解析设置 > 添加记录

添加完成

这样就完成域名的绑定了^_^。接下来开始⽐较重要,错⼀步都不⾏。

4. 配置服务器

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

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

修改密码

这⼀步按照提⽰操作完成就⾏。修改完成以后记得重启,⼤概需要半分钟。进⼊远程连接 >

这时系统会弹出⼀个密码让你保存,这个是远程连接的密码,需要你⾃⼰存起来,下次打开远程需要先填这个密码(但是使⽤了Xshell就不⽤填这个,总之先存着吧)。

输⼊远程密码后,会进⼊服务器命令界⾯(类似于本地的cmd)

它⾸先会要求你输⼊user名和password,user名默认是root,密码是刚刚你改的那个,成功了就像这样⼦^_^。

5. 下载Xshell和Xftp

但是,实际上如果每次连接服务器都要这么⿇烦的话,那确实挺⿇烦的,所以需要借助⼀个第三⽅的⼯具进⾏远程与服务器连接,有很多,这⾥我使⽤的是Xshell和Xftp。

Xshell是⼀个远程与服务器连接的软件,国外的,正常是要收费使⽤的,我下了⼀个个⼈学校的免费版本。这⾥贡献地址:

需要在这⾥填你的邮箱,然后下载地址会直接发送到你的邮箱⾥。

下载并且安装。

打开Xshell,点击新建会话,点击设置

选择协议ssh,填⼊你的公⽹IP,端⼝默认22

填⼊你的⽤户名和密码,这样你就不⽤每次都要登录了,⾃动登录。

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

6. 安装Nginx

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

两者有什么区别呢?可以参阅⼀下这篇⽂章这⾥,我选的是Nginx。

在安装Nginx之前,需要安装⼀些依赖的库

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

如果有需要,根据error提⽰可能还需要GCC和OpenSSL

yum install gcc-c++

yum install -y openssl openssl-devel

安装好了之后,可以安装Nginx了

wget -c https://nginx.org/download/nginx-1.14.0.tar.gz

解压并进⼊nginx⽬录

tar -zxvf nginx-1.14.0.tar.gzcd nginx-1.14.0

使⽤nginx的默认配置

./configure

编译安装

makemake install

查找安装路径

whereis nginx

可以看到我的安装路径是在 /usr/local/nginx,默认在这个⽬录下,有⼀个sbin⽬录,它下⾯有个nginx⽂件,这个nginx是个可执⾏⽂件,

执⾏启动命令:

/usr/local/nginx/sbin/nginx

执⾏完没有报错既说明服务器成功开启,此时使⽤你的IP在浏览器直接输⼊然后回车,你就会看到⼀个这样⼦的页⾯神奇地出现!

恭喜你,服务成功地运⾏了^_^!(反正第⼀次看到⾃⼰的服务器成功运⾏,总是很兴奋的)查看服务运⾏状态

ps -ef | grep nginx

这个数字需要在接下来停⽌服务命令中⽤到停⽌服务:

kill 5048

重新启动服务:

/usr/local/nginx/sbin/nginx -s reopen

7. 上传静态资源⽂件

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

打开后⼤概就这样⼦

接下来的操作就⽐较简单了,这⾥我安装了node,需要安装node.js后台的就要安装这个(后期再说)。

服务器的根⽬录是 /root,你可以建⼀个⽬录⽤来放⾃⼰的项⽬⽂件,这⾥我建了⼀个/app⽬录。需要放什么⽂件,直接拖拽过来(很⽅便有⽊有^_^)。

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

8. 配置Nginx

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

修改⼀下 nginx 的配置⽂件

vim /usr/local/nginx/conf/nginx.conf

按shift + i 进⼊编辑状态,上下⽅向键控制光标要改的地⽅如下:⽤户改成当前⽤户 root

这⾥改成你新建的⽬录

修改完配置,Ctrl + c 退出编辑,:wq 保存退出。对于Linux指令可以参考这个

vim三种模式:命令模式、插⼊模式、编辑模式。使⽤ESC或i或:来切换模式。命令模式下::q 退出:q! 强制退出:wq 保存并退出

修改完配置⽂件之后,需要重新启动服务器

/usr/local/nginx/sbin/nginx -s reload

9. 常⽤指令

配置 nginx 常⽤命令:· 查看配置:

vi /usr/local/nginx/conf/nginx.conf

· 编辑配置:

vim /usr/local/nginx/conf/nginx.conf

· 重启配置:

/usr/local/nginx/sbin/nginx -s reload

· 重启服务:

/usr/local/nginx/sbin/nginx -s reopen

到这⾥,如果你的浏览器还不能显⽰主页的话,如果出现下⾯的错误:1. 出现403(被拒绝)参考⽂章:

2. 使⽤ vim 出现 E325:ATTENTION 错误删除交换⽂件 .swp:

cd /usr/local/nginx/confls -la

rm -f .nginx.conf.swp

因为交换⽂件是隐藏的,ls 命令看不到,需要 ls -la 才可以查看隐藏⽂件。如果这篇⽂章有帮助到你,请给我点个赞吧,谢谢~

因篇幅问题不能全部显示,请点此查看更多更全内容