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

news2024/11/13 9:48:45

在这里插入图片描述

作者主页:

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

目录

    • ==作者主页==:
    • 如何自建一个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: ./frontend
    ports:
      - '3000:3000'
    depends_on:
      - backend
  backend:
    build: ./backend
    ports:
      - '5000:5000'
    environment:
      - MONGO_URL=mongodb://mongo:27017/my_website
  mongo:
    image: mongo
    ports:
      - '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.coloradmin.cn/o/1930976.html

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

相关文章

ospf复习综合小实验

实验要求&#xff1a; 1&#xff0c;R4为ISP&#xff0c;其上只能配置IP地址&#xff1b;R4与其他所有直连设备间均使用公有IP 2&#xff0c;R3-R5/6/7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3&#xff0c;整个OSPF环境IP基于172.16.0.0/16划分&#xff1b; 4&#…

redis其他类型和配置文件

很多博客只讲了五大基本类型&#xff0c;确实&#xff0c;是最常用的&#xff0c;而且百分之九十的程序员对于Redis只限于了解String这种最常用的。但是我个人认为&#xff0c;既然Redis官方提供了其他的数据类型&#xff0c;肯定是有相应的考量的&#xff0c;在某些特殊的业务…

1.MQ介绍

MQ 消息队列&#xff0c;本质是一个队列&#xff0c;先进先出&#xff0c;只不过队列中存放的内容是message而已。 为啥学习MQ 1.流量消峰 如果一个订单系统最多每秒能处理一万次订单&#xff0c;正常情况下我们下单1秒后就能返回结果。但是在高峰期&#xff0c;如果有两万…

NLP入门——RNN、LSTM模型的搭建、训练与预测

在卷积语言模型建模时&#xff0c;我们选取上下文长度ctx_len进行训练&#xff0c;预测时选取句子的最后ctx_len个分词做预测&#xff0c;这样句子的前0~seql-1-ctx_len个词对于预测没有任何帮助&#xff0c;这对于语言处理来说显然是不利的。 在词袋语言模型建模时&#xff0c…

Milvus 核心设计(5)--- scalar indexwork mechanism

目录 背景 Scalar index 简介 属性过滤 扫描数据段 相似性搜索 返回结果 举例说明 1. 属性过滤 2. 扫描数据段 3. 相似性搜索 实际应用中的考虑 Scalar Index 方式 Auto indexing Inverted indexing 背景 继续Milvus的很细设计&#xff0c;前面主要阐述了Milvu…

【排序算法】1.冒泡排序-C语言实现

冒泡排序&#xff08;Bubble Sort&#xff09;是最简单和最通用的排序方法&#xff0c;其基本思想是&#xff1a;在待排序的一组数中&#xff0c;将相邻的两个数进行比较&#xff0c;若前面的数比后面的数大就交换两数&#xff0c;否则不交换&#xff1b;如此下去&#xff0c;直…

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

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

【java】力扣 合并两个有序数组

文章目录 题目链接题目描述代码第一种第二种 题目链接 88.合并两个有序数组 题目描述 代码 第一种 public void merge(int[] nums1, int m, int[] nums2, int n) {for(int i 0;i<n;i){nums1[mi] nums2[i];}Arrays.sort(nums1);}第二种 public void merge(int[] nums1,…

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

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

JVM垃圾回收-----垃圾分类

一、垃圾分类定义 垃圾分类是JVM垃圾分类中的第一步&#xff0c;这一步将堆中的对象分为存活对象和垃圾对象两类。 在垃圾分类阶段&#xff0c;JVM会从一组根对象开始&#xff0c;通过对象之间的引用关系&#xff0c;遍历所有的对象&#xff0c;并将所有存活的对象进行标记。…

QT使用QPainter绘制多边形维度图

多边形统计维度图是一种用于展示多个维度的数据的图表。它通过将各个维度表示为图表中的多边形的边&#xff0c;根据数据的大小和比例来确定各个维度的长度。 一、简述 本示例实现六边形战力统计维度图&#xff0c;一种将六个维度的战力统计以六边形图形展示的方法。六个维度是…

leetcode-383.赎金信

题源 383.赎金信 题目描述 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。magazine 中的每个字符只能在 ransomNote 中使用一次。示例 1&…

MySQL(3)表的操作

目录 1. 表的操作; 2. 数据类型; 1. 表的操作: 1.1 创建表: 语法: create table 表名( 属性 类型 [comment ], 属性 类型 [comment ], 属性 类型 ) character set 字符集 collate 校验集 engine 存储引擎; 前面博客提到: MyISAM和InoDB这两个比较重要. 1.2 查看表…

Spring与设计模式实战之策略模式

Spring与设计模式实战之策略模式 引言 在现代软件开发中&#xff0c;设计模式是解决常见设计问题的有效工具。它们提供了经过验证的解决方案&#xff0c;帮助开发人员构建灵活、可扩展和可维护的系统。本文将探讨策略模式在Spring框架中的应用&#xff0c;并通过实际例子展示…

three.js领衔,10大基于webGL的JavaScript库。

Three.js的赫赫威名补多少&#xff0c;不了解的自行搜索或者翻看大宇之前的文章&#xff0c;除了three.js外&#xff0c;我想实现web3D效果还有其他库吗&#xff1f;答案是有的&#xff0c;而且还不少。 除了 Three.js&#xff0c;还有一些基于 WebGL 的库和框架&#xff0c;它…

动态环境下的激光slam论文列表

文章目录 Scan Context: Egocentric Spatial Descriptor for Place Recognition within 3D Point Cloud Map&#xff08;2018&#xff09;LIO-CSI: LiDAR inertial odometry with loop closure combined with semantic information&#xff08;2021&#xff09;Semantic Lidar-…

防火墙--双机热备

目录 双击热备作用 防火墙和路由器备份不同之处 如何连线 双机 热备 冷备 VRRP VGMP&#xff08;华为私有协议&#xff09; 场景解释 VGMP作用过程 主备的形成场景 接口故障的切换场景 整机故障 原主设备故障恢复的场景 如果没有开启抢占 如果开启了抢占 负载分…

网络原理(上)

前言&#x1f440;~ 上一章我们介绍了网络的一些基础知识&#xff0c;今天来讲解一下网络原理相关的知识点&#xff0c;分三篇进行阐述内容有点多​​​​​​​ 再谈协议分层 应用层 传输层&#xff08;重点&#xff09; UDP协议 TCP协议 TCP如何完成可靠传输&#xff…

在 PostgreSQL 里如何处理数据的归档和清理过程中的数据完整性验证?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 里如何处理数据的归档和清理过程中的数据完整性验证 在 PostgreSQL 里如何处理数据的归…

3D数字孪生项目运行卡顿,来看看它要求的电脑配置。

有些小伙伴和我说&#xff0c;数字孪生项目运行卡顿&#xff0c;不知道啥原因&#xff0c;根源还是这类项目是浏览器渲染&#xff0c;对电脑配置要求很高。 运行3D数字孪生项目需要一台性能强大的电脑&#xff0c; 以下是一个推荐的配置清单&#xff1a; 1. 处理器&#xff1…