开封网站优化公司,游戏网站建设的必要性,wordpress vs zencart,wordpress.fr『亚马逊云科技产品测评』活动征文#xff5c;开发一个手机官网
授权声明#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权#xff0c;包括不限于在 Developer Centre, 知乎#xff0c;自媒体平台#xff0c;第三方开发者媒体等亚马逊云科技官方渠道
前言 …『亚马逊云科技产品测评』活动征文开发一个手机官网
授权声明本篇文章授权活动官方亚马逊云科技文章转发、改写权包括不限于在 Developer Centre, 知乎自媒体平台第三方开发者媒体等亚马逊云科技官方渠道
前言
近来我打算买一个手机就去看一下现在市面上有什么新推出的手机。我先是到各大手机厂商官网上面去浏览一下。逛着逛着当我逛到oppo官网的时候我发现它们的官网做的挺好看的。我就有了一个想法我能不能把它们的官网给复现一下。 作为一名程序员当然是可以的了。既然确定要把oppo的官网自己来实现一下那就开始干活了。
前端项目开发
开发这个官网我打算采用ssr服务端渲染技术来做。我平时主要是用vue来开发的而对于vue是有一款专门针对它的ssr框架nuxt。随着vue3推出nuxt也进行了升级推出了新的版本–nuxt3。这个手机官网项目我就采用nuxt3来开发了。
创建项目
开始开发前我们需要先创建项目。 我们进入到nuxt3的官网然后点击文档页签进入到文档页面。 然后点击左侧的快速开始 官方文档给出了提示就告诉我们怎么创建项目了。 我们在cmd里运行命令
npx nuxilatest init project-name运行命令后按照步骤提示一步一步配置即可。 选择完之后项目就开始创建同时开始安装依赖。 安装的时候由于需要安装项目依赖所以需要等待一会。
项目开发
项目已经创建好接下来我们就可以开发前端项目了。
路由配置
nuxt的项目配置路由是在pages文件夹里进行配置的。 我配置下面几个路由
indexoneplusintelligentserver 主要配置了这几个路由
页面开发
页面开发我主要开发了下面几个页面
oppo专区oneplus专区智能硬件服务 在各自的页面进行开发就好了。主要是一些html和css的知识。这些不算特别难就不带大家一步一步去做了。 最后项目开发好了我们就可以进行项目打包了。因为我们要先把项目打包然后才可以到服务器进行部署。 在cmd里运行命令
npm run build项目就开始打包了等待一会项目打包完成。 注意我项目里配置的打包命令是npm run build。你项目的打包命令可能不一定就是它。具体是什么可以查看你项目里面的配置。
服务器部署
前端项目开发好之后就可以进行服务器部署了。 要进行服务器部署首先你得有服务器。随着云服务的推广和普及现在我们可以非常方便地就拥有一台云服务器了。 云服务器的厂商有很多这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器大公司推出来的产品我相信它。 好了介绍这么多我们开始到服务器里部署项目吧。 登录亚马逊云服务器后进入服务器控制台页面。我们在顶部搜索栏里搜索EC2。 我们可以查看到搜索结果点击EC2进入EC2的控制台页面。 进入EC2控制台之后我们点击启动实例按钮。 点击启动实例进入到实例创建页面 这里我给实例起了一个名字叫做myserser。当然你可以自己起一个别的名字。 下面的操作系统我选择的是亚马逊的一个linux系统。 对没错服务器里我使用的是linux系统。如果你对linux系统不熟悉的话也可以安装其它系统比如windows系统。 关于安装其它系统这里就不介绍了。 下面还有一些其它配置项 不过这些配置项我们暂时使用不到先保持默认即可。如果后面想要修改还是可以修改的。 不过注意有一个密钥对是必须要配置的。一会实例创建好了我们需要使用这个密钥对去登录的。 点击创建新密钥对按钮 这里我给密钥对命名为myserver和我实例名字一样方便记忆。 点击创建密钥对密钥对就创建好了。 整个实例的配置项都配置好了我们点击右侧的启动实例按钮就可以把实例启动了。 实例正在创建 我们等待一会。 实例启动成功了我们就可以连接实例了点击中间的连接到实例按钮。 我们选择第一种方式就好了它是基于浏览器的网页形式显示命令行窗口的。有了命令行窗口我们就可以在里面输入命令行执行命令了。 我们进入到命令行窗口了和实例建立了连接 关于服务器的部署nuxt框架已经内置好一个node服务。我们把这个服务启动就可以把项目启动了。 要想使用node当然得要先安装node。 我们输入以下命令安装node
sudo yum install -y node输入之后等待一会node就安装好了。 接着安装git
sudo yum install git -y之所以安装git是因为一会我们要从git仓库把代码拉下来。 等待一会git就安装好了。在云服务器安装这些工具还是挺快的。 从git仓库拉取代码
git clone https:xxxxx把你的仓库代码拉下来之后进入到你的项目里。 我们通过cd命令进入你的项目文件夹
cd xxx-xx后面是你的文件夹名称 进去之后我们需要先安装依赖。这和我们在本地电脑操作是一样的把项目从git仓库拉下来安装依赖才能把项目运行。 执行命令
npm install等待一会把项目里的依赖安装好。 接着我们就可以启动项目了。 启动项目我是使用pm2来启动的。pm2主要是用来做进程管理的如果你想了解更多可以到它官网查看一下。 我们先安装pm2这里使用npm来安装
npm i -g pm2全局安装pm2等待一会pm2就安装好了。 然后用pm2来启动项目在控制台里输入下面命令
pm2 start npm -- preview执行命令 启动之后我们可以看到下面提示项目启动了。这是pm2的启动进程列表告诉我们pm2里有哪些进程正在运行。 项目启动了这时候还不能访问我们的网站因为服务器对应的端口还没有开放。 我们回到实例的控制台页面 到实例的安全里面配置对应的规则。 我们点击它进入安全组配置页面 我们点击编辑入站规则在里面添加一个8001端口。在我的项目了我配置的端口是8001。可能你的项目里不一定是使用这个端口而是配置了其它的端口。在你部署的时候需要注意一下。 添加好之后在实例控制台页面 实例已经添加了8001端口了这样我们就能访问网站了。 在浏览器里输入我们的公网ip端口打开网站
在浏览器里我们就可以看到我们开发的官网了。 我们到oppo的官网查看一下它们的页面效果。 把我制作的官网和oppo的官网对比一下发现它们还是很像的是不是。
完结
到这里基于ssr技术使用nuxt3制作一个手机官网已经介绍完成了。 看完本篇文章如果你感兴趣的话也想使用nuxt3制作一个官网网站的话。你可以参考下本篇文章自己尝试搭建一下。
