前端小菜鸡的网站架设之路

本文涉及的产品
.cn 域名,1个 12个月
简介: 作为一个软件工程专业的学生,感觉随着对互联网的慢慢深入了解,才发现眼前的一座座大山都在等着我们去攀爬,去翻越。感觉学校学的都是课本上的知识,这种实际操作还是得企业带我们,也非常感谢阿里云给我们提供一个实例的ecs云服务器,让我们能更好的学习云计算方面的知识。我也只是一个小萌新,发布此文章希望对刚入门的小伙伴有帮助,毕竟我们是一类人,也希望大佬对我多多指导,让我能更强,在互联网道路上越走越远吧!感谢!

大学四年,已经匆匆忙忙的过了3年,在最紧张的最后一年里,我们也加快的学习的步伐,毕竟总有一天要出身社会,大学不能是我们永远的避风港。在此期间,我们从最开始的c语言到java再到linux,mysql等等,总感觉都是一些概念上,书本上或者考试上的东西,真正的操作也就部分课程期末一次罢了。总感觉缺了点什么。。
于我而言,让我最感兴趣的还是自己架设一个网站吧,首先说说我的经历吧,最初了解到服务器还是玩游戏的时候知道的,最开始玩单机,后来电脑带不动了(因为游戏太大Ark)。开始知道服务器这个概念,当时就想开服,自己当服主。随后我开始慢慢接触html、js原生,以及vue,react等,再之后知道了域名这个东西,我直接很兴奋的买了一年,结果发现访问不了,随着慢慢了解,原来域名要实名注册,要备案,还要改解析等等,而且光有域名还不行,还要买空间,(资金大出血了)。想想算了吧,之后就发现了阿里云给我们免费的实例。
现在就说说我是如何操作的吧,首先我们领取到实例ecs后我们要进行远程连接,之后重置登录密码,这里是6位加大小写,之后我们就进去了实例的后台了,这里用户名默认是root,但是密码就很犯难了,这时候我们就要回到我们的实例控制台,在这里我们可以重置实例密码,这个密码就是我们登录的密码。一定要记住了!!!在之后我们打开网页搜索宝塔,在宝塔中我们选个安装模板,这里我只安装了linux模板,选择在线安装,这里的服务器ip地址要在我们的实例ecs中查看我们的公网ip地址密码就是我们之前的实例密码,点击立即安装到服务器。漫长的等待之后他会跳出来宝塔的访问地址和用户名密码等,直接登录,此时你会发现登录不上,那是因为我们的实例没有开公共的ip都能访问,再次进去实例中的安全组,配置规则然后加一个都可以的,顺便注册下宝塔,那这里我们就好奇了,为什么要用宝塔呢?宝塔是干什么的?这里其实宝塔就是一个软件可以吧我们的服务器底层的命令可视化让我们直接在页面网站上操作,对着一个后台全是字母操作架设网站还是十分不理解和困难的(对于我这种逻辑不强,命令记得不清楚的人来说)。之后我们要在宝塔界面的文件中找到www/wwwroot/中创建一个文件夹,在这个文件夹中导入我们的网页文件,这里我是用脚手架直接 npm run build 的直接将生成的dist1文件导入我们的宝塔,之后进去宝塔的软件商店下载ngxin防火墙下载免费的防火墙,之后进去www/server/panel/vhost/nginx然后双击打开phpfpm-status...在里面创建一个conf结尾的文件我这里是reaperking.conf,在里面配置以下文件然后ctrl+s保存,底下配置参考下,但是服务器代理看你自己了,我这里是后端接口的服务器所以要代理下,这里给大家普及一下,其实跨域这个问题可以由前端后端或者配置时解决,但是后端解决的话不安全,作为前端工作者,并不是后端不给你解决只是不太好,但有的时候后端就是懒得搭理你,所以最好还是配置服务器的时候解决。
server {

# 监听端口
listen 端口3000以上5858;
# 绑定域名(多个之间用空格隔开)
server_name 网址改2;

location / {
    # 项目根目录
    root /www/wwwroot/reaperking/dist;;
    # 默认首页
    index index.html index.htm index.php;
    # 开启目录文件列表(不写则403)
    autoindex on;  
}

#服务器代理
location /api/ {
    proxy_pass http://kg.zhaodashen.cn/v1/; #留心:分号必须写
}

}
以上都完成后我们此时只需要访问我们宝塔左上角的网址ip加上我们配置的端口,端口前加冒号哦!就可以访问我们的网页了!希望对刚入行的萌新有点帮助,我就是萌新,哈哈!希望大家多多指教!要是大佬有好工作也能给我介绍介绍,万分感谢!!
QQ图片20221027170146.png
QQ图片20221027170332.png
QQ图片20221027170549.png
QQ图片20221027170628.png
QQ图片20221027170632.png
QQ图片20221027170635.png
QQ图片20221027170714.png
QQ图片20221027170717.jpg
QQ图片20221027170720.png
QQ图片20221027180333.png
QQ图片20221027180336.png
QQ图片20221027180342.png
QQ图片20221027180346.png
QQ图片20221027180518.png
QQ图片20221027180521.png

目录
相关文章
|
13天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
83 29
|
6天前
|
前端开发 JavaScript UED
惊呆了!这些前端技巧竟然能让你的网站秒变高大上,赶快学起来!
前端技术是网页设计的核心,能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧:动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript,可以实现视觉吸引的动态背景;微交互设计如按钮点击效果能增强用户参与感;响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学,效果显著,值得尝试。
17 3
|
6天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
15 3
|
11天前
|
前端开发 JavaScript API
惊呆了!这些前端技巧竟然能让你的网站支持AR/VR体验!
【10月更文挑战第31天】在数字化时代,用户对网页交互体验的要求日益提高,传统二维网页已难以满足需求。本文介绍如何利用前端技术,特别是Three.js,实现AR/VR体验,提升用户满意度和网站价值。通过示例代码,展示如何创建简单的3D场景,并探讨AR/VR技术的基本原理和常用工具,帮助开发者打造沉浸式体验。
28 6
|
11天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
24 3
|
13天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
44 4
|
13天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
28 3
|
13天前
|
搜索推荐 前端开发 UED
惊!这些前端技巧竟然能让你的网站在搜索引擎中获得更高排名!
【10月更文挑战第30天】在数字化时代,网站的搜索引擎排名直接影响流量和品牌知名度。本文通过四个真实案例,揭秘前端技巧如何提升搜索引擎排名:1. 关键词优化与布局;2. 高质量内容与多媒体优化;3. 网站结构优化与URL优化;4. 提升页面加载速度。这些技巧不仅提高排名,还能增强用户体验,助力业务发展。
30 3
|
13天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
24 2
|
4天前
|
缓存 前端开发 JavaScript
前端性能优化:让你的网站更快、更流畅
前端性能优化:让你的网站更快、更流畅
11 0