🚀前端如何部署项目,实战阿里云服务器,手把手教学

部署核心步骤

1.准备打包好的前端代码(dist包)或者是一个html文件
2.购买阿里云服务器,并且连接
3.为阿里云服务器安装ngnix开启web服务
4.使用xshell和sftp将自己的前端代码放到服务器上


1.准备前端代码

这部分很简单,可以随意准备。我这边就随便起了个vue脚手架,然后打了个dist包。

2.购买阿里云服务器

如果是作为练习的话,买最便宜的就OK了。其实没什么,地域选择国内,然后配置选最低的就行了,便宜。操作系统一般都是选centOS64 ,把免费分配公网ip勾上就行

购买完成后, 你需要点控制台,然后找到云服务器ECS

然后你就能找到你的服务器了,其中最重要的就是实例(管理你的服务器状态)和安全组(控制可访问该服务器的端口号)

点击实例中的远程连接,看是否能正常连接。 这里的ip地址(公)就是待会你要连接的服务器的ip地址,也是别人访问你网站的地址,可以注意一下。

如果你的页面显示这个,说明你与远程连接已经成功了

3.为阿里云服务器安装ngnix开启web服务

a.准备工作:安装xshell(用来连接服务器)和xftp(用来上传你的文件) , 如果是window电脑

b.打开xshell,然后连接你的远程服务器

之后会弹出让你输用户名(一般是root)和密码。最后就是连接成功了

恭喜你,此刻已经可以和服务器通信了。虽然刚才在云服务器上也可以远程连接,但是使用xshell一般比较方便

注意点,如果你这里如果连接不上。那么你一定需要看我这一步!!!!很重要!!!去云服务器页面设置安全组,建议大家都去做这一步!!!!

添加一个22的入口(这个和xshell连接的端口号需要是一致的,xshell默认是22),其他选择如图

再添加一个80的入口,用于nginx的,跟上面的一样的步骤

c.安装反向代理nginx

命令:yum install nginx

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

有这个complete就说明成功了

但是此时你只是在服务器安装了nginx,并没有在远程服务器启动这个nginx的服务。这里就要用到几个命令了。我先全部放出来,后面会用到部分。 (注意千万不要把nginx打成了ngnix!!!!!!!!!!我老是打错)

安装nginx:yum install nginx

看是否有ngnix进程:netstat -anput | grep nginx

查看服务器端口占用情况:netstat -ntlp

nginx启动:nginx

nginx重启:nginx -s reload

关闭nginx:

nginx -s stop : 快速停止nginx

nginx -s quit :完整有序的停止nginx

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

d.启动nginx

命令:nginx,一般输完没有任何的反馈,如果你不确定有没有启动nginx,那么你可以使用netstat -anput | grep nginx这个命令看看有没有nginx的端口占用

---

上面这个图看不出来,可以输这个命令netstat -anput | grep nginx看看有没有端口占用

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

然后在浏览器输入你对外的ip地址。如果页面出现了内容(一般是centos或者nginx页面)就说明你的nginx启动成功了,我这里是因为放了页面,所以有页面了,你们的应该不是这个页面,但是只要出现了有文字,就说明步骤是正确的

e.将你的文件放置到服务器上

点击你的xshell传输新建文件,会把刚才下载的xftp打开

此时右边就是你的云服务器的桌面了,右键新建一个web文件夹,再在里面新建一个html1文件夹,把你的dist文件传输上去

怎么把本地的放上去?直接拖拽到文件夹的空白区域就行

f.修改nginx文件,让我们的nginx服务代理我们自己的html文件

先找到默认的nginx配置文件路径: nginx -t

在xftp上找到该文件传输到自己的电脑上(默认是传输到桌面上的)

使用vscode(没有vscode,用webstorm和记事本也可以)编辑该文件,主要是改这里的路径改成我们刚才上传的路径

然后把该nginx.conf覆盖服务器上(就是上传到服务器,拖进去)的这个文件

g.重启nginx(nginx要求修改了nginx.conf配置之后必须重启后才生效)

打开xshell:输入nginx -s reload,重启,重启之后没有任何反应,这是正常的不要慌

此时用浏览器,打开你的ip地址。如果显示出来了你自己的网页,那就要说明你的网页已经上线成功了,你可以把你的ip发给任意一个人,他们都能访问你的网站了

相关推荐
mldong12 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排13 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby606114 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角15 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!15 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰15 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi16 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen17 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马18 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒18 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端