自建Web网站部署——案例分析

在这里插入图片描述

作者主页:

知孤云出岫在这里插入图片描述

目录

    • ==作者主页==:
    • 如何自建一个Web网站
      • 一、引言
      • 二、需求分析
      • 三、技术选型
      • 四、开发步骤
        • 1. 项目初始化
          • 初始化前端
          • 初始化后端
        • 2. 前端开发
          • 目录结构
          • 示例代码
            • App.js
            • Home.js
        • 3. 后端开发
          • 目录结构
          • 示例代码
            • app.js
            • productRoutes.js
            • Product.js
        • 4. 前后端连接
          • 安装axios
          • 在`Products.js`中获取产品数据
      • 五、部署
        • 1. Docker化
          • Dockerfile(前端)
          • Dockerfile(后端)
          • docker-compose.yml
        • 2. 使用Nginx反向代理
          • nginx.conf
      • 六、总结

如何自建一个Web网站

在这里插入图片描述

一、引言

自建一个Web网站不仅可以展示个人或企业的内容,还可以提升技术能力和项目管理经验。本文将通过一个具体案例,从需求分析、技术选型、开发步骤到部署和维护,详细介绍如何自建一个Web网站。

二、需求分析

假设我们需要为一个小型企业创建一个展示其产品和服务的官方网站。需求包括:

  1. 首页:展示公司简介、主要产品和服务。
  2. 产品页:详细展示各个产品的图片和描述。
  3. 服务页:介绍公司提供的各类服务。
  4. 联系我们页:提供联系表单和公司地址。
  5. 后台管理系统:用于管理产品、服务和用户反馈。

三、技术选型

根据需求选择合适的技术栈:

  • 前端:HTML、CSS、JavaScript、React(用于构建用户界面)
  • 后端:Node.js、Express(用于处理服务器端逻辑)
  • 数据库:MongoDB(用于存储数据)
  • 部署:Docker、Nginx(用于容器化和部署)

四、开发步骤

1. 项目初始化

首先,创建一个新的项目文件夹,并初始化前后端项目。

mkdir my_website
cd my_website
初始化前端
npx create-react-app frontend
初始化后端
mkdir backend
cd backend
npm init -y
npm install express mongoose body-parser cors
2. 前端开发
目录结构
frontend
│   ├── public
│   ├── src
│   │   ├── components
│   │   ├── pages
│   │   ├── App.js
│   │   ├── index.js
│   └── package.json
示例代码
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import Products from './pages/Products';
import Services from './pages/Services';
import Contact from './pages/Contact';function App() {return (<Router><Switch><Route path="/" exact component={Home} /><Route path="/products" component={Products} /><Route path="/services" component={Services} /><Route path="/contact" component={Contact} /></Switch></Router>);
}export default App;
Home.js
import React from 'react';function Home() {return (<div><h1>Welcome to Our Company</h1><p>We offer the best products and services.</p></div>);
}export default Home;
3. 后端开发
目录结构
backend
│   ├── models
│   ├── routes
│   ├── app.js
│   └── package.json
示例代码
app.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const productRoutes = require('./routes/productRoutes');const app = express();
app.use(cors());
app.use(bodyParser.json());mongoose.connect('mongodb://localhost:27017/my_website', {useNewUrlParser: true,useUnifiedTopology: true,
});app.use('/api/products', productRoutes);app.listen(5000, () => {console.log('Server is running on port 5000');
});
productRoutes.js
const express = require('express');
const router = express.Router();
const Product = require('../models/Product');router.get('/', async (req, res) => {const products = await Product.find();res.json(products);
});router.post('/', async (req, res) => {const newProduct = new Product(req.body);await newProduct.save();res.json(newProduct);
});module.exports = router;
Product.js
const mongoose = require('mongoose');const productSchema = new mongoose.Schema({name: String,description: String,price: Number,imageUrl: String,
});const Product = mongoose.model('Product', productSchema);module.exports = Product;
4. 前后端连接

在前端,使用axios库与后端进行通信。

安装axios
npm install axios
Products.js中获取产品数据
import React, { useState, useEffect } from 'react';
import axios from 'axios';function Products() {const [products, setProducts] = useState([]);useEffect(() => {axios.get('http://localhost:5000/api/products').then(response => {setProducts(response.data);}).catch(error => {console.error('There was an error fetching the products!', error);});}, []);return (<div><h1>Our Products</h1><ul>{products.map(product => (<li key={product._id}><h2>{product.name}</h2><p>{product.description}</p><p>${product.price}</p></li>))}</ul></div>);
}export default Products;

五、部署

1. Docker化

创建Dockerfile和docker-compose.yml文件,以便容器化应用。

Dockerfile(前端)
# Base image
FROM node:14# Set working directory
WORKDIR /app# Install dependencies
COPY package*.json ./
RUN npm install# Copy source code
COPY . .# Build the application
RUN npm run build# Expose the port
EXPOSE 3000# Start the application
CMD ["npm", "start"]
Dockerfile(后端)
# Base image
FROM node:14# Set working directory
WORKDIR /app# Install dependencies
COPY package*.json ./
RUN npm install# Copy source code
COPY . .# Expose the port
EXPOSE 5000# Start the application
CMD ["node", "app.js"]
docker-compose.yml
version: '3'
services:frontend:build: ./frontendports:- '3000:3000'depends_on:- backendbackend:build: ./backendports:- '5000:5000'environment:- MONGO_URL=mongodb://mongo:27017/my_websitemongo:image: mongoports:- '27017:27017'
2. 使用Nginx反向代理
nginx.conf
server {listen 80;location / {proxy_pass http://frontend:3000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}location /api/ {proxy_pass http://backend:5000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

六、总结

自建一个Web网站需要综合考虑前后端技术选型、开发、部署及维护。通过本案例,我们实现了一个简单但功能齐全的网站,包括首页、产品页、服务页、联系我们页及后台管理系统。通过Docker和Nginx,我们确保了应用的可移植性和高可用性。在实际应用中,可能需要根据具体需求进行更多的定制和优化。

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

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

相关文章

硕博电子智能控制器、触摸显示屏在集装箱跨运车上的应用

港口跨运车&#xff0c;又称跨运车或轮胎式龙门吊(RTG)&#xff0c;专门用于集装箱码头的装卸和搬运作业&#xff0c;能够迅速完成集装箱在码头前沿、堆场区域以及仓库之间的运输和堆垛&#xff0c;大幅度缩短了装卸周期&#xff0c;提高了港口物流周转效率。 现代跨运车往往配…

LabVIEW扬尘控制系统

设计了一套基于LabVIEW的扬尘控制系统&#xff0c;通过监测TsP&#xff08;总悬浮颗粒物&#xff09;浓度、风向和摄像头视频&#xff0c;实现对环境的综合监控和扬尘控制。系统可以自动判断扬尘位置&#xff0c;并驱动抑尘设备进行抑尘。硬件选用NI cDAQ-9178数据采集模块、Om…

Go语言---HTTP编程基础(简单版百度贴吧爬虫)

网络爬虫 网络爬虫又称网络蜘蛛、网络蚂蚁、网络机器人等&#xff0c;可以自动化浏览网络中的信息&#xff0c;当然浏览信息的时候需要按照我们制定的规则进行&#xff0c;这些规则我们称之为网络爬虫算法。使用Python可以很方便地编写出爬虫程序&#xff0c;进行互联网信息的…

深入理解PostgreSql域类型(Domain),灵活定义数据约束,让表结构设计更加严谨

在PostgreSQL中&#xff0c;域&#xff08;Domain&#xff09;是一种用户定义的数据类型&#xff0c;它基于系统内已存在的数据类型&#xff0c;并可以附加约束条件。使用域可以增强数据的完整性和一致性&#xff0c;因为它允许开发者对特定列设定更为具体的规则&#xff0c;比…

科技出海|百分点科技智慧政务解决方案亮相非洲展会

近日&#xff0c;华为非洲全联接大会在南非约翰内斯堡举办&#xff0c;吸引政府官员行业专家、思想领袖、生态伙伴等2,000多人参会&#xff0c;百分点科技作为华为云生态合作伙伴&#xff0c;重点展示了智慧政务解决方案&#xff0c;发表《Enable a Smarter Government with Da…

socket功能定义和一般模型

1. socket的功能定义 socket是为了使两个应用程序间进行数据交换而存在的一种技术&#xff0c;不仅可以使同一个主机上两个应用程序间可以交换数据&#xff0c;而且可以使网络上的不同主机间上的应用程序间进行通信。 2. 图解socket的服务端/客户端模型

简单一阶滤波器设计:matlab和C实现

一、简单一阶滤波器的模型 二、示例 得: y(n)-0.9y(n-1)=x(n)+0.05x(n-1),即:y(n)=0.9y(n-1)+x(n)+0.05x(n-1) 已知:,并且有: A. 假设输入序列有N=100个点 B. 系统初始状态为0,即y(-1)=0 C. 输入序列是因果序列,

IDEA快速生成项目树形结构图

下图用的IDEA工具&#xff0c;但我觉得WebStorm 应该也可以 文章目录 进入项目根目录下&#xff0c;进入cmd输入如下指令&#xff1a; 只有文件夹 tree . > list.txt 包括文件夹和文件 tree /f . > list.txt 还可以为相关包路径加上注释

C++ 入门基础:开启编程之旅

文章目录 引言一、C的第⼀个程序二、命名空间1、namespace2、namespace的定义 三、C输入 与 输出四、缺省参数五、函数重载六、引用1、引用的概念和定义2、引用的特性3、指针和引用的关系七、inline八、nullptr 引言 C 是一种高效、灵活且功能强大的编程语言&#xff0c;广泛应…

为ppt中的文字配色

文字的颜色来源于ppt不可删去的图像的颜色 从各类搜索网站中搜索ppt如何配色&#xff0c;有如下几点&#xff1a; 1.可以使用对比色&#xff0c;表示强调。 2.可以使用近似色&#xff0c;使得和谐统一。 3.最好一张ppt中&#xff0c;使用的颜色不超过三种主要颜色。 但我想强调…

33.异步FIFO IP核的配置、调用与仿真

&#xff08;1&#xff09;异步FIFO的配置过程&#xff1a; ps&#xff1a;异步fifo相比较同步fifo少一个实际深度 &#xff08;2&#xff09;异步FIFO的调用: module dcfifo (input wr_clk ,input rd_clk ,input [7:0] …

泉盛UV-K5扩容2Mbit EEPROM

泉盛UV-K5扩容2Mbit EEPROM 步骤 分离前面板与背板。 拆下电池&#xff0c;底部有个空隙&#xff0c;从缝隙撬开背板。分离前面板时注意喇叭连接线&#xff0c;不要扯断了。 分离屏幕。 先从箭头位置向上挑起&#xff0c;屏幕稍微松动即可左右晃动&#xff0c;直至完全取出。注…

开发实战经验分享:互联网医院系统源码与在线问诊APP搭建

作为一名软件开发者&#xff0c;笔者有幸参与了多个互联网医院系统的开发项目&#xff0c;并在此过程中积累了丰富的实战经验。本文将结合我的开发经验&#xff0c;分享互联网医院系统源码的设计与在线问诊APP的搭建过程。 一、需求分析 在开发任何系统之前&#xff0c;首先要…

【数据结构】二叉树全攻略,从实现到应用详解

​ &#x1f48e;所属专栏&#xff1a;数据结构与算法学习 &#x1f48e; 欢迎大家互三&#xff1a;2的n次方_ ​ &#x1f341;1. 树形结构的介绍 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做…

详解曼达拉升级:如何用网络拓扑结构扩容BSV区块链

​​发表时间&#xff1a;2024年5月24日 BSV曼达拉升级是对BSV基础设施的战略性重塑&#xff0c;意在显著增强其性能&#xff0c;运行效率和可扩容。该概念于2018年提出&#xff0c;其战略落地将使BSV区块链顺利过渡&#xff0c;从现有的基于单一集成功能组件的网络拓扑结构&am…

GuLi商城-商品服务-API-品牌管理-JSR303分组校验

注解:@Validated 实体类: package com.nanjing.gulimall.product.entity;import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.nanjing.common.valid.ListValue; import com.nanjing.common.valid.Updat…

MySQL-事务、日志

事务 特性 原子性 是指事务开始后&#xff0c;必须成功执行完所有的操作才会结束&#xff0c;否则会回滚到事务刚开始前。 拿转账来说&#xff0c;一个成功的 A向B转账100元的过程 会涉及如下过程&#xff1a; A&#xff1a;从数据库读取A的余额&#xff1b;A的余额-100&am…

安全防御---防火墙双击热备与带宽管理

目录 一、实验拓扑 二、实验需求 三、实验的大致思路 四、实验过程 4、基础配置 4.1 FW4的接口信息 4.2 新建办公&#xff0c;生产&#xff0c;游客&#xff0c;电信&#xff0c;移动安全区域 4.3 接口的网络配置 生产区:10.0.1.2/24 办公区:10.0.2.2/24 4.4 FW4的…

微调 Florence-2 - 微软的尖端视觉语言模型

Florence-2 是微软于 2024 年 6 月发布的一个基础视觉语言模型。该模型极具吸引力&#xff0c;因为它尺寸很小 (0.2B 及 0.7B) 且在各种计算机视觉和视觉语言任务上表现出色。 Florence 开箱即用支持多种类型的任务&#xff0c;包括: 看图说话、目标检测、OCR 等等。虽然覆盖面…

气膜的制作工艺—轻空间

气膜结构是现代建筑领域中的一项创新技术&#xff0c;以其独特的优点在多种应用场景中得到广泛推广和应用。轻空间将详细介绍气膜的制作工艺&#xff0c;帮助大家更好地理解气膜结构的制造过程及其技术优势。 1. 选材与设计 气膜的制作首先从材料的选择和设计开始。气膜材料主要…