自建Web网站部署—

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

news2024/11/23 19:06:06

在这里插入图片描述

作者主页:

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

- ==作者主页==:
- 如何自建一个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网站。

二、需求分析

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

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

三、技术选型

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

前端：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;
    }
}