带你从零部署你的网页（两种方式）

最新推荐文章于 2024-03-14 17:32:09 发布

FunnySaltyFish

最新推荐文章于 2024-03-14 17:32:09 发布

阅读量6.8k

点赞数 5

分类专栏：探索文章标签： git github 网页部署前端

本文链接：https://blog.csdn.net/qq_43596067/article/details/123443945

版权

探索专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页部署

小伙伴们完成了网页的制作后，是否希望自己精心制作的网页能被其他人访问到呢？今天我们就用vercel和nginx两种方式，带大家亲手部署属于自己的网页。

vercel

vercel是广为使用的网站托管平台，可以与 github 、 gitlab 等平台协作使用。对于个人用户提供了免费的服务（虽然限制了项目数量和其他功能），但也完全够用了。此处使用github平台演示。

github 是什么？

世界上最大的代码托管平台

代码托管是啥意思，和百度网盘有啥不同

准确来说，github托管的是Git代码仓库 ，而git是分布式版本控制系统。越说越迷糊了？那就当成百度网盘好了，只不过是拿来放代码的。

上传到github

首先我们打开github，新建一个仓库

选择一个名字，我这里起名叫Tech。下面的选项保持默认即可

点击创建，你就会得到一个空的仓库啦。接下来，让我们打开本地的项目位置，把它上传到github吧

（执行下面的命令需要本地安装git）

命令如下：

cd 项目位置                                # 切换到项目路径
git init                                  # 初始化git项目
git remote add origin xxx@xxx.git         # 添加一个远程路径，名字叫origin，位置是xxx
git add *                                 # 添加所有文件
git commit -m '你要提交的消息'              # 提交
git push                                  # 推送提交到远程

上面的命令涉及到了 xxx@xxx.git这个远程路径，你可以在github仓库的页面那里找到这个链接

稍等一会儿，我们就把项目上传到了github仓库中。刷新网页即可看见。

接下来打开vercel，新建一个项目

选择对应github仓库并选择模板（我们这个项目没用模板，所以直接Other）后，点击deploy

稍等几分钟，之后就可以访问了

这里放一个我用vercel部署的个人博客：FunnySaltyFish’s Blog - FunnySaltyFish的小站

服务器+nginx

第二种方式就是使用nginx了，这是很多企业部署的方法，自定义程度高，专业性强。

nginx是啥

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

动手

购买服务器

建议腾讯云，价格良心。最近开年采购，有优惠。2核2G云服务器首年40元（0.7 折），https://curl.qcloud.com/Xnwdl5k1

（同样的东西，这是阿里云现在的价格）（2022-3-12）

()

一般来说，个人测试的网站1核1G就足够了，大一点的1核两G就够。像上面推荐的2核2G服务器完全够满足你折腾的需要了。这也是这段时间大促，需要入手的同学们抓紧赶快！

安装nginx

sudo apt update
sudo apt install nginx

安装过程中需要按y确定

启动nginx

sudo service nginx start

如果正常启动，在浏览器里输入ip即可看到这个页面：

或许你之前也曾见过这个页面，现在你明白这是什么了。完成这一步，咱们的hello world就完成了。接下来让我们把实际页面放上去

上传网页文件

一般使用sftp（或ftp）上传，此处选择xftp（因为它和xshell是配套的）。你也可以用其他软件（如winscp），此处不赘述。

在xshell页面打开新建文件传输即可一键连接

然后利用上述工具上传你的整个网页。我这里选择了/home/tech/game/文件夹，如下

然后打开/etc/nginx/conf.d文件夹，新建一个game.conf文件。它用来配置nginx。

写入如下内容并保存

  server {
		# 80端口是http默认端口
        listen       80;
		# 这里写你的ip地址
        server_name  124.xxx.xxx.86;
		#访问日志
        access_log  logs/access.log;
		# 错误日志
		error_log  logs/error.log  error;

        location / {
            alias  /home/tech/game/;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 }

使用如下命令检查你的conf文件有没有问题

sudo nginx -t

没问题的话，重启nginx，你配置的conf就会生效

sudo nginx -s reload

然后让我们访问一下，在浏览器输入ip地址……接下来，就是见证奇迹的时刻！

成功啦！我们的网站已经可以被其他人访问到了！

域名

通常来说，网站都是由域名访问的。当你在地址栏输入域名时，浏览器会先向dns主机发请求，找到真实的ip地址再访问。我们这里也把域名加上。

首先是购买域名了。值得注意的是，根据相关法律法规，如果网站托管在中国内地（大陆）的服务器上，你需根据所在省市的管局规则进行ICP备案申请。这个一般在你购买服务器的厂商那里就可以免费代办，大约一周到一个月之间就能拿到。之后还会有公安备案。

在完成所有备案后，你就可以在域名的控制台设置域名解析。在这个例子中，我们将funnysaltyfish.fun解析到服务器ip地址。然后，只需要修改nginx的

server_name  124.xxx.xxx.86;

为对应的域名

server_name  你的域名;

重启nginx，就可以通过域名访问了。

试一下？http://funnysaltyfish.fun

之后呢

祝愿大家部署过程顺利！

再丢一遍服务器购买地址，知识在于动手实践，40块甚至可能吃不了一顿饭，不妨转化为你的探索经历，不是吗？https://curl.qcloud.com/Xnwdl5k1

FunnySaltyFish

关注

5
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
带你从零部署你的网页（两种方式）

网页部署小伙伴们完成了网页的制作后，是否希望自己精心制作的网页能被其他人访问到呢？今天我们就用vercel和nginx两种方式，带大家亲手部署属于自己的网页。vercelvercel是广为使用的网站托管平台，可以与 github 、 gitlab 等平台协作使用。对于个人用户提供了免费的服务（虽然限制了项目数量和其他功能），但也完全够用了。此处使用github平台演示。github 是什么？世界上最大的代码托管平台代码托管是啥意思，和百度网盘有啥不同准确来说，github托管的是Git
复制链接

扫一扫