分享一下,如何搭建个人网站的步骤

        在这段充满探索与创造的奇妙旅途中,我就像一位耐心的建筑师,在数字世界的荒原上精心雕琢,两周的时光缓缓流淌。每天,我与代码共舞,手执HTML、CSS与JavaScript这三大构建魔杖,一砖一瓦地筑起了梦想中的网络城堡。从零到一,我的网站如幼苗破土,渐渐枝繁叶茂,每一行代码都是浇灌其成长的甘露。终于,一个满载心血与创意的小世界在网络上悄然绽放,静待着访客的探索与赞美。✨🌐

     我近期花了近两周的时间,搭建了一个网站。以java+vue3为例,以下是主要内容:

  1. 域名申请+云服务器+ICP备案

域名、服务器和备案,这三个你可以选择如阿里云、腾讯云、华为云其中一家,根据你的兴趣爱好来选择。我就是选择国内比较知名的阿里云(重要的是服务好,只要你不懂的,你提一下工单,很快就能得到解决,very good!)

首先是要申请域名,然后再申请一台云主机,接着开始ICP备案。然后在域名管理列表那点击“解析”,把域名指向这台主机IP。

这里要注意的是,如果没有进行ICP备案,网站是无法访问的。这个过程大概一到两周左右的时间。

这里注意下,为了安全,还要申请下SSL证书,阿里云有提供个人免费测试的证书。不过有限期比较短。你跟着步骤操作就行,证书下来后,记得要选择nginx下载证书。

另外一个要注意的点是,要在主机管理内,安全组,开放443和80端口,要不然后面做好的网站无法访问哦。

我这边做的一个是分享平台,后端是java,前端是vue3.如果自己不会开发,也是可以购买一套程序的。以java+vue3为例,前后端分离。

2、程序代码准备

2.1 后端 Java采用的是springboot+mybaitplus。

部署还得安装一堆环境很麻烦,现在都是用docker,可移植性好。我这边后端用到的中间件都是直接使用镜像拉取的。如mysql、fastdfs、redis。比如有人在阿里云社区分享的镜像。如果有其他镜像,都可以在这上面进行搜索,并拉取安装。很方便的,如下图

我这边java程序也是用docker进行部署的。记得docker部署时,端口映射要保持一致,这样好管理,也不会忘记的。

如我这边启动docker时的例子:docker run -d -p8081:8081 --name score score:010202

由于会经常操作docker,我这边列一些常用的操作命令。

进入docker里面,docker exec -it 24b2fa6d27bc bash  (24b2fa6d27bc 是容器id)

重启docker restart xxx

查看容器,docker ps

经常发布太多版本,要勤快点,删除镜像,释放空间docker rmi 24b2fa6d27bc

2.2 前端采用的是vue3

    程序开发完成后,接下来要打包前端,在打包之前,要记得,有时候发布后,会访问空白页面,那原因可能是路径不正确。

module.exports = defineConfig({
  productionSourceMap: false,//隐藏源代码
  assetsDir: 'static',
  outputDir: 'dist/'+process.env.VUE_APP_FILE,  //这个是打包后的生成目录
  transpileDependencies: true,
  publicPath: process.env.VUE_APP_PUBLIC_PATH, //打包后,生成的js按相对路径来访问
})

env是环境参数配置,我这边是通过不同的env环境,配置开发环境,测试环境和生产环境。

publicPath这个参数很重要,要在生产环境中配置https://xxx.com/。前端比较简单,这里不详述。

3、nginx配置

关于前端部署后,你要准备一下nginx,安装nginx后,你可以编写一下server配置

这一段是http的80端口强制跳转到https的443端口。

server{
    listen 80;
    server_name xxx.com;
    return 301 https://$host$request_uri;
}

以下这个是443端口访问的前端路径,root就是前端html存放的地址。为了安全,前端访问后端,采用代理的方式,一能解决跨域的问题,二能解决安全的问题。

server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  gpt114.com;
    location / {
       root         /home/html/;
       index        index.html index.htm;
    }
    location  /api/ {
        proxy_pass http://xxx.com:8081/api/;  //8081是后端的端口。
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

    ssl_certificate  /home/gptfile/xxx.com.pem;
   ssl_certificate_key /home/gptfile/xxx.com.key;

#以上这两行,是存放证书的位置

}

配置完毕后,可以运行nginx -t来检查配置是否正确,如果返回successful.说明ok了,你直接进入sbin中的nginx进行启动就可以。

这样你就可以通过https://xxx.com来访问网站了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDK与JRE与JVM:它们之间的区别

JDK与JRE与JVM:它们之间的区别 JDK(Java开发工具包) JDK是JRE的超集,它包含JRE所拥有的一切以及编译器、调试器等开发工具。 JDK代表Java开发工具包。要在您的系统上安装Java,您需要首先在系统上安装JDK。 JDK包含编…

Blazor 中基于角色的授权

介绍 Blazor用于使用 .NET 代码库创建交互式客户端 Web UI。Microsoft 默认在 Blazor 应用程序中提供了一个用于身份验证和授权的身份框架。请注意,他们目前使用 MVC Core Razor 页面作为身份验证 UI。使用“Microsoft.AspNetCore.Identity.UI”包库来实现这一点。…

实战|YOLOv10 自定义目标检测

引言 YOLOv10[1] 概述和使用自定义数据训练模型 概述 由清华大学的研究团队基于 Ultralytics Python 包研发的 YOLOv10,通过优化模型结构并去除非极大值抑制(NMS)环节,提出了一种创新的实时目标检测技术。这些改进不仅实现了行业领…

基于STM32和人工智能的智能楼宇安防系统

目录 引言环境准备智能楼宇安防系统基础代码实现:实现智能楼宇安防系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景:智能楼宇安防管理与优化问题解决方案与优化收尾与总结 1. 引言 随着物联网和人工智能技术的…

考研数学|做完《660》,做《880》还是吃力,怎么办?

880吃力说明基础还是不太扎实,建议配合知能行再刷880。 强化之前做660,然后在强化的时候再做880。 660整体难度属于基础阶段到强化阶段。而且是选填部分的题目,所以还是要做一些其他题 然后说一下推荐的习题册:基础不好先做1800、…

公司电脑加密软件——【中科数安】电脑文件资料透明加密,防泄密系统

中科数安电脑文件资料透明加密防泄密系统介绍 中科数安提供的电脑文件资料透明加密防泄密系统,是一款专为企业电脑终端设计的数据安全解决方案。该系统通过采用先进的透明加密技术和精细化的权限管理,旨在全方位保护公司电脑中存储、处理、传输的各类文…

在同一个 Blazor 应用中结合 SQL-DB 和 MongoDB

介绍 传统上,在单应用程序中,我们对整个应用程序使用单个数据库服务器。但是,我将 SQL 数据库和 MongoDB 结合在同一个应用程序中。此应用程序将是 RDBMS 和 No SQL 数据库的组合。我们将从头开始创建一个 Blazor 应用程序,并使用…

APS计划排程系统如何打破装备使用约束

APS计划排程系统是离散制造型企业在计划控制方向的重要支撑,它提供的是交期预测、订单排产计划、物料采购计划、人力分配计划等等。近些几年来,多品种、小批量、多订单的生产模式,让企业的计划员应接不暇、疲累不堪,传统的人工经验…

C++语法01 基本框架

目录 什么是 C ? 新建源程序 保存源程序 程序基本框架 #include using namespace std; int main() return 0; 编译 运行 什么是 C ? C语言,是基本的程序设计语言之一【程序设计语言,简单的来说就是编写代码来操控计…

数据库大作业——音乐平台数据库管理系统

W...Y的主页😊 代码仓库分享💕 《数据库系统》课程设计 :流行音乐管理平台数据库系统(本数据库大作业使用软件sql server、dreamweaver、power designer) 目录 系统需求设计 数据库概念结构设计 实体分析 属性分…

升级必备!Win11专业版镜像下载地址:一键直达!

许多用户想要体验Win11专业版系统的新功能,但不知道Win11专业版在哪下载?接下来小编给大家分享最新的Win11专业版镜像,大家喜欢的话,一键点击下载即可,还可以打开【系统之家官网】寻找自己更喜欢的操作系统。 推荐下载…

大学物理(动量定理)

目录 冲量与动量 质点动量定理 质点系动量定理:​编辑 例题 ​编辑 例题 ​编辑 动量守恒定律:。 例题 ​编辑 例题 ​编辑 角动量 ​编辑 例题 ​编辑 力矩与角动量定理​编辑 角动量守恒定律: ​编辑 例题 冲量与动量 质点动量定理 质点系动量定理: 例题 例…

大型网站优化指南:打造流畅的在线体验

大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力,并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求,通过渐进式的发展策略运营成大型…

深入探索Stable Diffusion:从原理到应用的全面解析

目录 一 Stable Diffusion的基本概念 什么是Stable Diffusion? Stable Diffusion与传统生成模型的区别 二 Stable Diffusion的理论基础 扩散过程的数学描述 马尔可夫链蒙特卡罗方法(MCMC) 三 Stable Diffusion的算法实现 基本步骤 代码实现 四 Stable Diffusion的…

图形化编程:解锁数字创意的新钥匙

在这个日新月异的数字时代,编程已不再局限于专业人士的小圈子,它正逐渐成为一项基础技能,融入我们的日常生活与工作中。而对于那些对传统代码望而生畏的人来说,6547网认为图形化编程犹如一股清流,以其直观、易学的特点…

基础算法--双指针算法

文章目录 什么是双指针算法例题1.移动零2.复写零3.快乐数4.盛最多水的容器5.有效三角形的个数6.三数之和7.四数之和 什么是双指针算法 通常我们讲的双指针就是用两个指针,两个指针可以是快慢指针,解决成环的问题,也可以是指向收尾的两个指针…

window端口占用情况及state解析

背景: 在电脑使用过程中,经常会开许多项目,慢慢地发现电脑越来越卡,都不知道到底是在跑什么项目导致,于是就想查看一下电脑到底在跑什么软件和项目,以作记录。 常用命令 netstat -tuln : 使用…

Python3发送邮件如何添加附件?怎么配置?

Python3发送邮件的注意事项?如何配置Python3发邮件? Python3发送邮件时添加附件是一项常见的需求。无论是发送报告、图片,还是其他文件,掌握如何在邮件中添加附件至关重要。AokSend将详细介绍Python3发送邮件时如何添加附件&…

前端网站(二)-- 菜单页面【附源码直接可用】

菜单页面 开篇(请大家看完):此网站写给挚爱,后续页面还会慢慢更新,大家敬请期待~ ~ ~ 轻舟所编写这个前端框架的设计初衷,纯粹是为了哄对象开心。除此之外,并无其它任何用途或目的。 此前端框…

JavaScript运行原理和执行过程

参考: https://www.cnblogs.com/hexrui/p/15939592.html 1、执行上下文栈(调用栈) GECGlobal Execution Context(GEC)被放入到ECS(Execution Context Stack,简称ECS)中 GEC开始执…