如何从零上线一个网站

网站体验地址：ZrHub

本人是一个全栈开发者，欢迎大家有好的想法与我交流，对于网站上线如有疑惑也可联系我。

想要上线一个网站，设计到多个步骤和流程，从构思到上线，每一步都至关重要。

一个完整的产品大概经历下面这几个阶段：项目规划和需求分析、网络架构设计、技术选型、设计和原型制作、开发阶段、测试阶段、部署和上线、上线前检查、上线和发布、维护和优化等等。

本文将从需求分析、开发阶段、部署上线三个部分讲解我是如何上线我的个人网站的。

项目背景&为什么要做这个网站

我希望有一个个人网站，在展示自己信息的同时，能够持续输出一些内容，并以此作为媒介，将自己的内容持续输出展示。

需求分析&技术栈选择

技术栈

“没有最好的技术，只有最适合业务的技术。”

个人维护的信息页主要用于展示一些信息，一个纯前端项目，技术选型如下：

• 脚手架：vue
• 部署：nginx
• 云服务器&域名服务：阿里云
• 后端：node

需求分析

页面原型图绘制如下：

开发

开发过程就不过多阐述，如果有问题欢迎与我联系交流。

后端直接用node.js来完成便于部署，由于不是专业的前端，开发的界面稍显简陋，页面大概如下：

部署

云服务器

为了让你的项目能够通过公网访问，你需要一个公网ip，当然，如果你直接购买一台云服务器，那么这样一台服务器是会带上一个公网ip的。这里我选择了阿里云，操作系统可以选择Ubuntu或者CentOS这两个主流的发行版本。

购买之后找到控制台-云服务器ECS查看你的服务器，使用ssh软件对服务器进行连接。

【小tips：可以使用tmux等工具提高对服务器进行操作的效率。】

项目打包和路由配置

如果是vue的话，建议大家看一下这个视频：前端项目打包。

在项目根目录下执行npm run build打包出dist静态文件夹，将其拖入nginx中或者修改nginx配置文件中的根目录路径，打开nginx即可完成前端项目的启动。（linux下安装nginx可以使用自带的包管理器apt，yum等，安装路径默认在/etc/nginx/）

主要修改配置如下（解决刷新404问题，linux下的配置文件可能有所不同，配置文件在/etc/nginx/sites-available/下的default文件，但是root目录需要修改一下）：

域名&服务器相关配置

为了使外网能够访问到该端口，需要在服务器中开放该端口，打开云服务控制台安全组配置，开放80端口（一般的http端口默认为80端口），这样外部就可以通过ip+端口的形式来访问到你的前端服务了。

其次为了访问的时候能够通过域名解析ip，域名我们也是需要购买的，直接在阿里云购买即可。