400-915-1135
手把手教你搭建个人网站(服务器篇)(网站建设中服务器的搭建方式)免费搭建网站服务器,

手把手教你搭建个人网站(服务器篇)(网站建设中服务器的搭建方式)免费搭建网站服务器,

发表日期:2023-06-08 00:01:43   作者来源:众诚企业建站   浏览:281

本文将手摸手带你摸清楚一个网站从0到1的全过程

从以下几个步骤展开:

域名备案服务器域名绑定(DNS解析)Web容器(如:Nginx)网站内容静态文件 (如:Vue构建物)

翻译过来就是你把你的东西放在哪里?别人通过什么方式可以找到

域名

就是网络地址,通常我们简称“网址”

这个网络地址就叫网站域名。比如说当我们输入腾讯的网站域名是www.qq.com,就能正确访问到腾讯QQ的网站了。域名是解析到IP上来访问,有了域名,我们就不用输入IP来访问某个网站,这样方便记忆。

如何申请网站域名?我以阿里云万网为例:

链接地址:https://wanwang.aliyun.com/domain/

域名的注册遵循先申请先注册为原则,当你要注册的域名,必须得先查询一下是否被注册,注册过的,就不允许再次注册了。这个申请域名的比较简单,自己去操作一下,就会了

备案

国家要求国内任何一个网站必须进行工信部ICP备案,如果没有备案,你的网站链接是无法访问的。

网站备案的目的就是为了防止在网上从事非法的网站经营活动,打击不良互联网信息的传播,如果网站不备案的话,很有可能被查处以后关停。

当前阿里云是可以直接通过手机客户端直接去申请备案的,而且速度会比网站备案快很多,建议直接用手机客户端去备案。

服务器

服务器这里我们推荐华为云,因为可以薅羊毛

华为云开年采购季刚刚上线

个人认证用户:华为云100元无门槛代金券+免费领取一台服务器一个月企业认证用户:华为云200元无门槛代金券+免费领取一台服务器两个月薅羊毛姿势

第一步:扫描二维码注册华为云账号(一定要扫码注册,否则无法获得无门槛代金券)

云服务器低至88元/年,是正经云服务器

域名解析

到这里我们已经得到了网站域名和服务器,但是他们都是分别独立的,我们需要将域名和网站主机关联起来

添加一条记录,将我们的华为云的公网IP填到记录值的位置

Web容器

这里我们以Nginx为例,Nginx是一个免费的、开源的、高性能的 HTTP 和反向代理服务

假设你的服务器为centos系统

安装

sudo yum install nginx

使用 yum 进行 Nginx 安装时,Nginx 配置文件在 /etc/nginx 目录下

常用的nginx命令sudo systemctl enable nginx # 设置开机启动 nginx start # 启动 nginx 服务nginx stop # 停止 nginx 服务nginx restart # 重启 nginx 服务nginx reload # 重新加载配置,一般是在修改过 nginx 配置文件时使用。

验证 Nginx 是否成功启动,可以在浏览器中打开 http://YOUR_IP,您将看到默认的 Nginx 欢迎页面,类似于下图所示

网站内容

到了这一步,我们有了域名,服务器,web容器,就差往容器里面塞东西了,以 Vue 为例,我们首先要拿到 Vue 项目 build 后的dist文件夹

npm run build //将会产出dist文件

以最原始的方法将dist上传到服务包

scp dist.zip 用户名@服务器公网ip:/home/vueTest

注意这里我们是上传的 zip 文件,到了服务器你需要将目标 zip 解压

// 通过ssh登录

ssh 用户名@服务器公网ip

// 进入目标文件解压刚刚上传的zip包

cd

 /home/vueTest

unzip dist.zip

最后我们配置一下nginx

// 进入编辑nginx conf

vi /etc/nginx/conf.d/vueTest

server

{

listen 80;

server_name 你的域名;

index index.php index.html index.htm default.php default.htm default.html;

// 指向你的静态资源

root /home/vueTest/dist;

}

配置完重启一下nginx

nginx -t // 检查nginx配置是否正常

nginx reload // 重启nginx

不出意外,这个时候在浏览器输入你的域名应该能看到你的应用了

推荐阅读:

收藏 | 移动端H5开发常用技巧总结

Vue3.0 所采用的 Composition Api 与 Vue2.x ...

浅谈大型项目前端架构设计

深入浅出 Vue Mixin

JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

VUE中文社区

编程技巧 · 行业秘闻 · 技术动向