从0到1,在服务器部署你的第一个应用(小白也能看懂的保姆级图文实战)

容器数据库云存储

哈喽,大家好,我是狗哥!专注AI干货知识分享,如果你正在学习AI相关知识,欢迎关注狗哥领取免费学习资料哦~

前言

上次分享完如何开发自己的第一款web应用后,有兄弟在后台留言让出一期服务器部署的教程。

picture.image

狗哥这么宠粉那高低满足一下哈哈哈,今天就给大家带来一个保姆级教程,还不需要大家记住那么多复杂的Linux命令。

上一期我们是通过 Vercel 来部署应用的,但是这种方式分享出来的网站是需要魔法才能访问,所以今天咱们来讲讲如何用国内服务器快速部署应用。

咱们今天的案例是从部署一个纯前端的网页小游戏开始(VUE项目,不是单纯的HTML界面),保证让你学会这个流程。

🛠️狗哥实操

服务器配置

有自己服务器的小伙伴直接忽略这一步即可。

如果没有的小伙伴可以自行去阿里云或者腾讯云搞台最便宜的服务器,性能完全够自己使用了。价格也不贵,遇上活动还能更便宜。

picture.image

picture.image

我这里用腾讯云的轻量应用服务器做例子,主要是因为它便宜,79块钱一年,买不了吃亏买不了上当。

买的时候咱们顺便选择一下镜像,这里我直接选择预装 宝塔面板

picture.image

为什么要用宝塔面板?

如果你是Linux大神,喜欢敲命令行,那你可以跳过。但对于大多数人来说,直接操作服务器就像是开手动挡的拖拉机,不仅费劲,还容易熄火。

宝塔面板 给我们提供了一个可视化的图形界面,装软件、改配置、看状态,点点鼠标就搞定了。简单、直观、防手残 ,对新手来说,没有比这更友好的入门方式了。

官网:https://www.bt.cn/new/index.html

picture.image

这里狗哥演示一下如何手动安装宝塔面板:

首先直接复制上面官网提供的命令,在服务器终端运行。

  
if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install\_panel.sh;else wget -O install\_panel.sh https://download.bt.cn/install/install\_panel.sh;fi;bash install\_panel.sh ed8484bec

picture.image

安装完成以后,用它给你的地址登录进去,看到一个中文图形界面,是不是一下子就感觉心里有底了?

picture.image

安装Docker

登录以后,默认会给我们推荐一些基础环境,这里咱们直接安装部署神器 Docker

picture.image

为什么要用Docker?

不知道你有没有过这样的经历,一个项目在你电脑上跑得好好的,一传给同事或者部署到服务器上,就各种报错,缺这个少那个。

这就是环境不一致搞的鬼。

环境问题会让很多人饱受折磨,为了避免这种问题,所以还是推荐大家使用docker,能让你的部署变得前所未有的简单和可靠。(大家不需要知道这是啥啊,不要纠结,能用就行)

上面安装完成后可以验证一下,没问题就进行下一步。

picture.image

如何部署?

我这里准备了一个用Vue写的 贪吃蛇小游戏 ,纯前端项目,很适合拿来做第一次部署。当然你也可以换成你自己的项目。

picture.image

要想让Docker认识我们的项目并把它跑起来,光有项目代码还不够,还需要一些相关的配置文件,比如Dockerfile文件,相关脚本等。

在过去,这些都得手写,非常头疼。

但现在有了Cursor就不一样了,咱们直接交给它来处理。

picture.image

这里大家最好让Cursor帮你生成一个一键部署的脚本,省的你再使用相关Linux命令去配置了。

开始部署

配置文件都处理好后,咱们就可以来服务器进行部署了。

建议大家在本地将项目调整完成后在开始,要不然来回切换有点麻烦。

对于新手,我强烈推荐使用宝塔面板的文件上传功能,这是最简单直观的方式。

    1. 登录宝塔面板,点击左侧的“文件”。
    1. 找到一个你喜欢的位置,比如 /www/wwwroot ,然后创建一个新的文件夹,叫 my-project
    1. 进入这个文件夹,点击“上传”按钮,然后把项目文件一次性全部传上去。

picture.image

当然,如果你是老手,习惯用Git,那直接在服务器上把代码拉下来就行,更方便。

picture.image

代码上去了,我们需要通过终端进入项目目录。

你可以在宝塔面板的文件管理界面,直接点击“终端”按钮打开。

进入项目后咱们找到一键部署的脚本,这个文件可能和大家不一样哈,大家自行注意下,看cursor是怎么给你们创建的。

picture.image

然后我们需要给这个脚本添加相关执行权限,注意文件名哈。

  
chmod +x deploy.sh

然后再运行它,输入 ./deploy.sh

picture.image

第一次运行需要一点时间,因为它要在 Docker 里安装项目需要的各种环境,耐心等它跑完。

picture.image

看到上面启动成功就说明你的第一个应用部署成功啦~

现在,打开浏览器,输入你服务器的公网IP地址,后面再加上指定的端口号,比如 http://你的IP:8080

picture.image

看到这个界面,感觉是不是棒极了?现在你可以把这个链接发到群里,让朋友们来一把,顺便接受他们的膜拜了~

新手避坑指南

咱们新手上路,免不了会遇到一些小问题。

狗哥这就把几个常见的坑给你列出来,遇到问题照着解决就行。

1. 外网访问链接打不开?

这问题百分之九十是服务器的端口没对外开放。你需要去云服务商的管理后台,找到 防火墙安全组 的设置,添加一条规则,把你用的那个端口(比如8080)给放行了。

picture.image

picture.image

如果还不行,那可能是服务器系统自己的防火墙在捣乱,也需要设置一下。

  
# Ubuntu/Debian  
sudo ufw status  
sudo ufw allow 8080  
  
# CentOS/RHEL  
sudo firewall-cmd --list-ports  
sudo firewall-cmd --permanent --add-port=8080/tcp  
sudo firewall-cmd --reload

2. Docker镜像下载失败?

这个问题在国内很常见,主要是网络原因。

解决方法是给Docker配置一下 国内的镜像加速器 ,这个具体怎么配,你可以直接问Cursor,它会给你详细的步骤。

3. 端口被占用了?

如果你的服务器上还跑了别的东西,可能会出现端口冲突。修改一下部署脚本里的端口号,换一个不常用的,比如8888,然后重新运行脚本就行了。

  
# 查看端口占用  
sudo netstat -tlnp | grep :8080  
  
# 修改部署脚本中的端口  
nano deploy.sh  
# 将HOST\_PORT="8080"改为其他端口,如HOST\_PORT="3000"

4. 构建失败?

这个原因就多了。最好的方法是先在你 自己电脑上 把项目跑通,确保没问题了,再部署到服务器上。如果服务器上构建失败,记得看日志,把报错信息复制下来,直接丢给AI,它通常能给你靠谱的解决方案。

END

怎么样,跟着走下来,是不是发现把自己的想法变成一个能被别人访问到的在线应用,并没有想象中那今天的贪吃蛇只是入门。想不想或者,你更想看狗哥我再出一期保姆级教程?

怎么样,跟着走下来,是不是发现把自己的想法变成一个能被别人访问到的在线应用,并没有想象中那么遥不可及?

今天的贪吃蛇只是入门。想不想来点更牛的?

或者,你还想看狗哥再出一期保姆级教程?

如果是的话,在评论区告诉我 ,呼声高的话,下周就安排!

你在部署的时候还踩过哪些坑?或者你已经部署了什么好玩的东西?也欢迎来评论区跟我聊聊,大家一起进步。

如果这篇文章对你有帮助,不知道大家能否点个关注,顺便 给我个三连击:点赞、转发和再看。有什么问题也欢迎在评论区留言,我会一一回复的~

我是狗哥,关注我获得更多优质内容。

0
0
0
0
关于作者
关于作者

文章

0

获赞

0

收藏

0

相关资源
字节跳动 GPU Scale-up 互联技术白皮书
近日,字节跳动正式发布基于以太网极致优化的 GPU Scale-up 互联技术白皮书,推出 EthLink 的创新网络方案,旨在为 AI 集群提供低延迟、高带宽的高速互联传输,满足 AI 应用对 GPU 之间高效通信的需求。这一举措标志着字节跳动在 AI 基础设施领域的突破,有望推动通用人工智能(AGI)和大语言模型(LLM)的进一步发展。
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论