目录
前言
上一篇写了【如何使用华为云云耀云服务器L实例】,今天我们就来个实打实的项目部署,项目实战最能锻炼一个人的学习能力。本篇我们来部署一个围猫猫小游戏,让我们在学习过程中也不会过于枯燥,也希望你跟着我的文章学习后会有所收获。
游戏地址:围猫猫小游戏在线地址
(因服务器到期,所以地址无法访问了,后期我在部署另外服务器给兄弟们体验,难受)
游戏展示:
一、选择华为云云耀云服务器L实例的原因
之前我也了解过其他的云服务器,但是最终选择云耀云服务器L实例,因为它的使用门槛较低,并且对于服务器我还处于学习阶段,如果太多的服务器配置只能让我知难而退。然而云耀云服务器L实例是新一代开箱即用、面向中小企业和开发者打造的全新轻量应用云服务器。云耀云服务器L实例提供丰富严选的应用镜像,实现应用一键部署,助力客户便捷高效的在云端构建电商网站、Web应用、小程序、学习环境、各类开发测试等。
二、华为云云耀云服务器的优势
相比于传统的云服务器,华为云云耀云服务器L实例在购买和使用上更加简单。华为云用户体验团队针对中小企业和开发者在云服务器选配、部署、使用、运维等多个环节的痛点问题,提出“以用户场景为中心的购买“、“从整体到局部的全局可视管理”和“一站式配置引导”的解决思路,并落地了多个体验优化方案,极大提升了用户的使用体验。
三、快速部署一个小游戏
这里提供两种方式一种是终端部署,另一种是宝塔可视化面板部署,这两种都可以快速部署,可选择你最熟悉的方式进行实践操作。另外本服务器是Ubuntu
。
(1)终端部署
1、使用Termius
工具连接终端
输入服务器名称、IP地址、用户名、密码,登录之后进入终端。
登录之后显示下面的界面
2、安装Nginx
sudo:允许系统管理员让普通用户执行一些或者全部的root命令的一个工具
- 安装
sudo apt update
sudo apt install nginx -y
- 启动
sudo systemctl start nginx
sudo systemctl enable nginx
- 检查状态
sudo systemctl status nginx
sudo systemctl is-active nginx
- 配置
Nginx的配置文件位于/etc/nginx/nginx.conf
cd /etc/nginx
vi nginx.conf
http {
server
{
# 监听的端口号
listen 8088;
# 定义了虚拟主机的域名或IP地址
server_name 123.249.122.178;
# 将此路径替换为您的Vue.js应用程序的dist文件夹所在的实际路径
root /www/wwwroot/catchcat/dist;
# 定义了默认的索引文件,如果用户请求的是一个目录而不是特定文件时,Nginx会尝试查找这些文件作为默认文件
index index.html index.htm;
# 定义特定URL路径的配置
location / {
# 定义了Nginx的行为。它告诉Nginx首先尝试查找与请求URI匹配的文件($uri),如果找不到,则尝试查找一个目录($uri/),最后如果还找不到,将请求重定向到/index.html
try_files $uri $uri/ /index.html;
}
}
}
3、上传打包文件
将打包文件上传到/www/wwwroot/catchcat/dist
就可以访问啦!
访问地址:http://123.249.122.178:8088
(2)宝塔可视化面板部署
宝塔Linux面板是一款用于管理Linux服务器的免费、开源的Web控制面板,它提供了一系列功能和工具,使服务器管理变得更加简单和高效。
1、进入宝塔
当我们购买了Linux 可视化宝塔面板8.0
服务器之后,后有一个宝塔管理地址。上一篇已经介绍过了如何获取宝塔的账号密码,这里不多解释。
然后我们登录账号密码就进入到了宝塔界面。
2、宝塔菜单
宝塔Linux面板的左侧菜单提供了一系列主要功能和模块,用于管理和配置您的Linux服务器。以下是宝塔面板左边菜单的主要功能:
-
网站(Website): 在这个模块中,您可以创建、管理和配置网站,包括虚拟主机、域名、FTP帐户以及SSL证书的设置。
-
FTP: FTP服务器管理模块,可以设置FTP帐户,用于文件的上传和下载。
-
数据库(Database): 用于管理数据库系统,支持MySQL、MariaDB、MongoDB等。您可以在此创建、导入、备份和还原数据库。
-
监控(Monitor): 用于监控服务器性能和资源使用情况,包括CPU、内存、磁盘等。
-
安全(Security): 提供了一些安全性相关的设置,如防火墙、DDoS防护、SSH密钥管理等。
-
文件(File): 提供一个Web文件管理器,可用于浏览、上传、下载、编辑和删除服务器上的文件。
-
日志(Log): 在这里,您可以查看服务器的各种日志文件,以便进行故障排除和性能分析。
-
终端:可以连接你的服务器地址。
-
计划任务(Cron): 可以创建和管理计划任务,用于定期自动执行特定的任务或脚本。
-
软件商店:可以下载各种应用,比如:Nginx、Apache、Pm2等等
3、上传代码
打开文件
菜单,里面会有以www
开头的根目录,然后在/www/wwwroot
目录下新建一个catchcat
文件,把游戏打包后的dist文件上传。
4、下载Nginx应用
在软件商城
中搜索Nginx
,然后进行下载安装,注意下载的时间可能会比较长(我下载了二十多分钟)
5、配置Nginx
配置Nginx这里提供两种方式。
(1)可视化面板配置
点击上图中设置
按钮,然后会出来一个弹框,然后在配置修改选项中修改配置。
这里主要修改server
中的内容,修改完之后点击保存。
server
{
# 监听的端口号
listen 8088;
# 定义了虚拟主机的域名或IP地址
server_name 123.249.122.178;
# 将此路径替换为您的Vue.js应用程序的dist文件夹所在的实际路径
root /www/wwwroot/catchcat/dist;
# 定义了默认的索引文件,如果用户请求的是一个目录而不是特定文件时,Nginx会尝试查找这些文件作为默认文件
index index.html index.htm;
# 定义特定URL路径的配置
location / {
# 定义了Nginx的行为。它告诉Nginx首先尝试查找与请求URI匹配的文件($uri),如果找不到,则尝试查找一个目录($uri/),最后如果还找不到,将请求重定向到/index.html
try_files $uri $uri/ /index.html;
}
}
最后重启Nginx,点击服务
菜单中重启
按钮,如果上面的配置不出问题就会显示nginx服务已启动
。
(2)直接修改nginx.conf
文件
点击左侧菜单文件
,然后可根据目录/www/server/nginx/conf
查找nginx.conf
文件
双击nginx.conf
文件进行修改。
注意这里文件保存之后也是需要进行nginx重启,可以通过(1)的方法进行重启,当然也可通过命令行的形式:
//判断nginx配置是否正确
nginx -t
//停止nginx
nginx -s stop
//重启nginx
nginx -s reload
如果没有权限的话,就在前面加上sudo
总结
本项目使用华为云云耀云服务器L实例,从宝塔的基本使用入手讲解了如何部署一个围猫猫小游戏,从代码上传到Nginx配置,通过可视化面板直接操作,快速上手,10分钟就可部署一个项目,这也是我选择华为云云耀云服务器L实例的重要原因。