搭建自己的前端服务器环境—Node、MySQL、Git和Nginx等一网打尽
liuian 2025-05-11 17:05 112 浏览
前言
作为前端开发者一直都在关注浏览器的行为、表现。但是时间长了免不了要接触到后端的知识、服务器的知识。尤其是在前端技术爆发式发展的当下,前端慢慢的渗透到了更多的领域。比如,使用 express/koa 创建 http 服务,使用React-Native开发Android和IOS通用的APP,甚至使用node开发系统、嵌入式程序等。这个时候,我的内心开始蠢蠢欲动,我们能做的不仅仅是网页。虽然我是个前端,但是我有一颗全栈的心啊,正好之前入手了阿里云的服务器,这周闲来无事,折腾起来。
创建自己的服务器
我这里推荐使用云服务器,相比使用自己的服务器,云服务器有很多方便的地方,而且云服务器提供一个一周的试用版,用起来非常的方便。
创建一个轻量级的服务器 阿里云可以购买一台可使用一周的服务器,这个服务器正好用来做这次开发(已有的请跳过)。
登录阿里云,进入购买 CES 的地方,链接地址如下:
https://www.aliyun.com/[1]
依次选择:
o计费方式:包年包月。
o地域:华北5(当前华北5有优惠)。
o实例:请寻找1vCPU、1G内存的实例(我最终选择了突发性能实例 t5)。
o镜像:选择CentOS 7.4 (现在后端普遍使用6+的版本,7相比6有了很大改进,前端选择7可以减少很多麻烦),勾选安全加固。
o云盘:40G高效云盘。
o公网带宽:勾选自动分配公网 IP,选择1M带宽。
o安全组:选择默认安全组,并勾选http80端口和http443端口。
o购买周期:选择1周。
最终结果:
我们的服务器主要做网站类的开发,所以有针对性需求的用户可以考虑将内存增大,其他在需要的时候采取考虑。
安装自己的开发环境
Windows连接到服务器
Linux服务器不像window那样有一个可视化的界面,window/mac连接的时候也不像远程桌面那样方便。这里连接服务器需要使用命令才行。
window连接服务器 好消息是window下有一款神器:xshell,命令可以很方便的输入到一台服务器或者多台服务器上,用户密码也可以很方便的保存在本地,多个服务器还可以分组,你要做的就是专注于眼前的服务器开发。
这个软件可以直接百度下载。
o首先你需要安转一个xshell,下载需要填一些信息,安装非常简单,要注意的是安装的时候需要选择个人开发使用,不然安装好之后发现需要交钱才能用就坑了。
o安装好之后你就可以把自己的服务器ip、用户名、密码都填好了,以后只需要鼠标一点就进入了自己的服务器了。
o需要注意的是,选择一下默认的字符,不然你的中文会变成乱码。
o连接之后的界面是下面这样。
o首先有一个进入服务器的提示,然后下面就是熟悉的命令行了,不同的是前面那段显示的规则是用户名@机器名。
Mac连接服务器
Mac连接服务器可以使用自带的终端应用,也可以自己下载一个iTerm2,这里我推荐使用iTerm2,可以方便的使用不同的主题,添加各种有用的插件。
o打开iTerm2,输入连接命令ssh 用户名@ip地址然后回车,你会看到提示你输入密码,这个时候输入你在购买服务器的时候设置的密码就好了。
o只要密码正确,你就可以进入服务器了,依旧是熟悉的命令行模式。
o你会在第一时间看到服务器反馈的上次登录信息,欢迎信息,然后是命令行的提示,前面的显示规则是用户名@机器名。
几个常用的命令 要想使用Linux系统服务器做开发,不懂几个常用命令怎么行?
ossh 用户名@ip,连接服务器的命令。
ocd 绝对路径/相对路径,跳转到路径对应的目录下。
orm 文件名,删除文件。
orm -rf 目录路径,删除目录以及目录下的所有文件,谨慎操作!
ols [-a],查看当前目录下的文件和目录,加-a参数可以查看所有文件,包括隐藏文件(.开头的文件是隐藏文件,默认是看不见的)。
oll,查看当前目录下的文件详情,可以文件的权限,遇到没有权限执行的情况下可以使用这个命令查看。
opwd,查看当前路径的完整路径,不知道自己在哪儿的时候可以使用这个命令查看。
owhich 名字,在几个默认位置查找改名字,比如查找pm2安装在哪个地方了。
omkdir 目录名,创建一个空目录。
ocat 相对/绝对文件路径,查看文件的内容,多为查看日志或者其他文本文件。
ocp 文件路径 目标路径,复制一个文件到另外一个地方。
omv 文件路径 目标路径,移动一个文件到另外一个地方,也可以重命名。
ops -aux,显示当前进程,有时候需要用这个查看进程是否存活。
okill -9 进程id,结束进程,进程id就是上一条命令查到的pid。
otar -zxvf 文件,解压缩文件。
otar -zcvf 压缩后的文件 要压缩的文件/目录,压缩文件。
ovi 文件路径,使用vim进入文件的编辑模式。
ovi退出文件,按下esc键保证退出编辑模式,输入:q或者:q!强制退出。退出保存输入:wq
ovi编辑,按下i左下角会提示进入编辑模式,然后就是正常的输入文字,再按esc键退出编辑模式。
ovi保存编辑结果,按下esc键保证退出编辑模式,输入:x保存并退出
安装Node
1.推荐安装最新的稳定版。我这里是10.15.3,下载地址如下:
https://nodejs.org/en/download/[2]
2.选择Source Code后面的那一行,右键复制链接地址,我们使用源代码的方式安装,第一次安装的时候使用这种方式好处多多。
3.回到服务器,首先跳转到根目录下cd /。创建一个空目录,用来放所有的安装包mkdir software。
4.使用命令把刚才的文件下载下来wget
https://nodejs.org/dist/v10.15.3/node-v10.15.3.tar.gz。阿里云下载速度比较给力。
5.将下载好的压缩包解压tar -zxvf node-v10.15.3.tar.gz:
6.进入解压好的目录并执行config配置命令cd node-v8.9.4.tar && ./configure
7.在编译代码之前,还需要在机器上安装一些软件包,使得编译可以正常运行: sudo yum install gcc gcc-c++
8.执行编译以及安装命令make && make install,这里编译阶段时间会非常长,你可以喝杯茶,真的超级长,别怪我没提醒你。编译成功后执行npm -v和node -v测试是否安装成功。
安装MySQL
mysql是一个方便使用的开源数据库。因为使用简单,安装方便,功能强大,受到很多开发者的喜爱,给自己安装一个MySQL数据库真的是非常有必要的,利用它可以存储不少东西。
1.下载安装需要用到的源:
wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm[3]
2.安装下载的源rpm -ivh
mysql-community-release-el7-5.noarch.rpm
3.下载安装MySQL:yum install mysql-server
4.使用service mysqld start
5.使用命令修改当前用户的密码(默认root是没有密码的):mysqladmin -u root password '密码',这里我设置的密码为root
6.使用命令进入数据库:mysql -u root -p
7.这个时候数据库已经安装好了,但是只能在服务器上看。我们需要让MySQL运行远程连接,这样方便我们调试,不用每次都要使用命令行。
8.进入服务器的mysql命令行模式下,输入GRANT ALL PRIVILEGES ON . TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;其中root代表的是这次要修改的用户名,password代表这个用户使用的密码,然后再输入flush privileges;让命令生效。需要注意的是每行命令的最后要加;,不然是不会执行的。
9.如果顺利,这个时候已经是修改完了,你可以输入查询命令来看看最终的结果。SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user;。也可以通过软件直接登录数据库看看。
10.到此MySQL数据库就完成安装了,这个时候可以使用某个客户端连接上数据库看了(推荐navicat for mysql),也可以直接进入服务器的命令行模式查看数据库。
安装 Nginx
Nginx 真的是现在必不可少的一个软件。在转发请求、负载均衡等方面非常非常的有用。这里我们先简单的使用nginx的端口转发代理等几个功能。它可以将几个不同的服务集中在一个80端口下,根据域名或者请求路径来区分。
1.注意,在安装nginx之前还需要安装几个nginx的依赖插件。
2.安装pcre yum install -y pcre pcre-devel:
3.安装zlib yum install -y zlib zlib-devel
4.安装openssl,这个推荐安装,毕竟大家都在使用https证书了,yum install -y openssl openssl-devel
5.下载源代码,复制下载地址,并使用wget命令下载到服务器上,下载地址如下:
https://nginx.org/en/download.html[1]
6.解压下载的文件并进入解压好的目录tar -zxvf nginx-1.13.8.tar.gz && cd nginx-1.13.8
7.执行配置命令./configure
8.继续编译安装nginxmake && make install
9.查看安装结果whereis nginx
10.跳转到安装好的nginx目录下,进入sbin目录cd /usr/local/nginx/sbin
11.启动nginx./nginx
o./nginx,启动nginx;
o./nginx -s stop,停止nginx;
o./nginx -s quit,退出nginx;
o./nginx -s reload,重启nginx。
12.安装成功后,使用IP公网地址即可进行访问。
安装Git
centos上是没有安装git,而git是我们开发中经常要使用的工具,这里就讲一下怎么安装git。
1.在服务器上执行yum install git。如果上面的几个软件没有安装,您可能还需要安装几个依赖库,这个可以查看出现的错误来决定安装那些库。
2.确定一下git是否安装完成git --version
总结
至此为止,一个简单的前端环境就已经安装好了,你可以把你的项目通过git扔到服务器上进行访问了,如果你觉得我的文章对你有所帮助,多转发多关注都是对我莫大的鼓励,[
相关推荐
-
- 驱动网卡(怎么从新驱动网卡)
-
网卡一般是指为电脑主机提供有线无线网络功能的适配器。而网卡驱动指的就是电脑连接识别这些网卡型号的桥梁。网卡只有打上了网卡驱动才能正常使用。并不是说所有的网卡一插到电脑上面就能进行数据传输了,他都需要里面芯片组的驱动文件才能支持他进行数据传输...
-
2026-01-30 00:37 liuian
- win10更新助手装系统(微软win10更新助手)
-
1、点击首页“系统升级”的按钮,给出弹框,告诉用户需要上传IMEI码才能使用升级服务。同时给出同意和取消按钮。华为手机助手2、点击同意,则进入到“系统升级”功能华为手机助手华为手机助手3、在检测界面,...
- windows11专业版密钥最新(windows11专业版激活码永久)
-
Windows11专业版的正版密钥,我们是对windows的激活所必备的工具。该密钥我们可以通过微软商城或者通过计算机的硬件供应商去购买获得。获得了windows11专业版的正版密钥后,我...
-
- 手机删过的软件恢复(手机删除过的软件怎么恢复)
-
操作步骤:1、首先,我们需要先打开手机。然后在许多图标中找到带有[文件管理]文本的图标,然后单击“文件管理”进入页面。2、进入页面后,我们将在顶部看到一行文本:手机,最新信息,文档,视频,图片,音乐,收藏,最后是我们正在寻找的[更多],单击...
-
2026-01-29 23:55 liuian
- 一键ghost手动备份系统步骤(一键ghost 备份)
-
步骤1、首先把装有一键GHOST装系统的U盘插在电脑上,然后打开电脑马上按F2或DEL键入BIOS界面,然后就选择BOOT打USDHDD模式选择好,然后按F10键保存,电脑就会马上重启。 步骤...
- 怎么创建局域网(怎么创建局域网打游戏)
-
1、购买路由器一台。进入路由器把dhcp功能打开 2、购买一台交换机。从路由器lan端口拉出一条网线查到交换机的任意一个端口上。 3、两台以上电脑。从交换机任意端口拉出网线插到电脑上(电脑设置...
- 精灵驱动器官方下载(精灵驱动手机版下载)
-
是的。驱动精灵是一款集驱动管理和硬件检测于一体的、专业级的驱动管理和维护工具。驱动精灵为用户提供驱动备份、恢复、安装、删除、在线更新等实用功能。1、全新驱动精灵2012引擎,大幅提升硬件和驱动辨识能力...
- 一键还原系统步骤(一键还原系统有哪些)
-
1、首先需要下载安装一下Windows一键还原程序,在安装程序窗口中,点击“下一步”,弹出“用户许可协议”窗口,选择“我同意该许可协议的条款”,并点击“下一步”。 2、在弹出的“准备安装”窗口中,可...
- 电脑加速器哪个好(电脑加速器哪款好)
-
我认为pp加速器最好用,飞速土豆太懒,急速酷六根本不工作。pp加速器什么网页都加速,太任劳任怨了!以上是个人观点,具体性能请自己试。ps:我家电脑性能很好。迅游加速盒子是可以加速电脑的。因为有过之...
- 任何u盘都可以做启动盘吗(u盘必须做成启动盘才能装系统吗)
-
是的,需要注意,U盘的大小要在4G以上,最好是8G以上,因为启动盘里面需要装系统,内存小的话,不能用来安装系统。内存卡或者U盘或者移动硬盘都可以用来做启动盘安装系统。普通的U盘就可以,不过最好U盘...
- u盘怎么恢复文件(u盘文件恢复的方法)
-
开360安全卫士,点击上面的“功能大全”。点击文件恢复然后点击“数据”下的“文件恢复”功能。选择驱动接着选择需要恢复的驱动,选择接入的U盘。点击开始扫描选好就点击中间的“开始扫描”,开始扫描U盘数据。...
- 系统虚拟内存太低怎么办(系统虚拟内存占用过高什么原因)
-
1.检查系统虚拟内存使用情况,如果发现有大量的空闲内存,可以尝试释放一些不必要的进程,以释放内存空间。2.如果系统虚拟内存使用率较高,可以尝试增加系统虚拟内存的大小,以便更多的应用程序可以使用更多...
-
- 剪贴板权限设置方法(剪贴板访问权限)
-
1、首先打开iphone手机,触碰并按住单词或图像直到显示选择选项。2、其次,然后选取“拷贝”或“剪贴板”。3、勾选需要的“权限”,最后选择开启,即可完成苹果剪贴板权限设置。仅参考1.打开苹果手机设置按钮,点击【通用】。2.点击【键盘】,再...
-
2026-01-29 21:37 liuian
- 平板系统重装大师(平板重装win系统)
-
如果你的平板开不了机,但可以连接上电脑,那就能好办,楼主下载安装个平板刷机王到你的个人电脑上,然后连接你的平板,平板刷机王会自动识别你的平板,平板刷机王上有你平板的我刷机包,楼主点击下载一个,下载完成...
- 联想官网售后服务网点(联想官网售后服务热线)
-
联想3c服务中心是联想旗下的官方售后,是基于互联网O2O模式开发的全新服务平台。可以为终端用户提供多品牌手机、电脑以及其他3C类产品的维修、保养和保险服务。根据客户需求层次,联想服务针对个人及家庭客户...
- 一周热门
-
-
飞牛OS入门安装遇到问题,如何解决?
-
用什么工具在Win中查看8G大的log文件?
-
如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM
-
Trae IDE 如何与 GitHub 无缝对接?
-
如何修改图片拍摄日期?快速修改图片拍摄日期的6种方法
-
5步搞定动态考勤表!标记节假日、调休日?Excel自动变色!
-
RK3588-HDMIRX(瑞芯微rk3588芯片手册)
-
用纯Python轻松构建Web UI:Remi 动态更新,实时刷新界面内容
-
tplink无线路由器桥接教程(tplink路由器如何进行无线桥接)
-
都说Feign是RPC,没有侵入性,为什么我的代码越来越像 C++
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)
