自建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.mzph.cn/web/45865.shtml

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

相关文章

泛微e-cology WorkflowServiceXml SQL注入漏洞(POC)

漏洞描述&#xff1a; 泛微 e-cology 是泛微公司开发的协同管理应用平台。泛微 e-cology v10.64.1的/services/接口默认对内网暴露&#xff0c;用于服务调用&#xff0c;未经身份认证的攻击者可向 /services/WorkflowServiceXml 接口发送恶意的SOAP请求进行SQL注入&#xff0c;…

语音合成新篇章:Transformer模型的革新应用

语音合成新篇章&#xff1a;Transformer模型的革新应用 语音合成技术&#xff0c;又称文本到语音&#xff08;Text-to-Speech, TTS&#xff09;技术&#xff0c;一直是人工智能领域的重要组成部分。随着深度学习技术的飞速发展&#xff0c;Transformer模型凭借其卓越的处理序列…

飘雪的冬天,命运的交织

北风呼啸,天空中飘着鹅毛般的大雪,这又是一个飘雪的冬天。京都医院洁白的病床上躺着一个年轻女孩,她的脸上没有一丝血色,眼睛深深地凹了进去,看上去已经病入膏肓。病房的窗口边,一位身心俱疲的年轻男孩,望着病房外满天飞舞的雪花,思绪不由回到了三年前的林州市…… 一…

使用JS和CSS制作的小案例(day二)

一、写在开头 本项目是从github上摘取&#xff0c;自己练习使用后分享&#xff0c;方便登录github的小伙伴可以看本篇文章 50项目50天​编辑https://github.com/bradtraversy/50projects50dayshttps://github.com/bradtraversy/50projects50days有兴趣的小伙伴可以自己去gith…

面向对象七大原则

学习目标 了解面向对象七大原则基本概念。 在之后实践应用中&#xff0c;要给予七大原则去设计程序。 为什么有七大原则 七大原则总体要实现的目标是&#xff1a; 高内聚、低耦合。 使程序模块的可重复性、移植性增强。 高内聚低耦合 从类角度来看&#xff0c;高内聚低…

如何在Linux上部署Ruby on Rails应用程序

在Linux上部署Ruby on Rails应用程序是一个相对复杂的过程&#xff0c;需要按照一系列步骤进行。下面是一个基本的部署过程&#xff0c;涵盖了从安装所需软件到部署应用程序的所有步骤。 安装必要的软件 在部署Ruby on Rails应用程序之前&#xff0c;需要确保Linux系统上安装了…

android 嵌套webview,软键盘遮挡输入框

实际项目中&#xff0c;android需要加载h5&#xff0c;经常遇到软键盘遮盖输入框的情况&#xff0c;h5测试的时候&#xff0c;是没问题的&#xff0c;但是在APP中是不能把页面推上去。经测试完美解决了这个问题。 1. oncreate *************************** try {web();layout…

掌握Xcode Storyboard:iOS UI设计的可视化之旅

掌握Xcode Storyboard&#xff1a;iOS UI设计的可视化之旅 在iOS应用程序开发的世界中&#xff0c;用户界面&#xff08;UI&#xff09;设计是吸引用户的关键。Xcode的Storyboard功能为开发者提供了一个强大的可视化工具&#xff0c;通过拖放的方式快速构建和管理UI。本文将深…

AI网络爬虫023:用deepseek批量提取天工AI的智能体数据

文章目录 一、介绍二、输入内容三、输出内容一、介绍 天工AI的智能体首页: F12查看真实网址和响应数据: 翻页规律: https://work.tiangong.cn/agents_api/square/sq_list_by_category?category_id=7&offset=0 https://work.tiangong.cn/agents_api/square/sq_list_b…

08 模型演化根本 深度学习推荐算法的五大范式

易经》“九三&#xff1a;君于终日乾乾&#xff1b;夕惕若&#xff0c;厉无咎”。九三是指阳爻在卦中处于第三位&#xff0c;已经到达中位&#xff0c;惕龙指这个阶段逐渐理性&#xff0c;德才已经显现&#xff0c;会引人注目&#xff1b;但要反思自己的不足&#xff0c;努力不…

基于 SSH 的任务调度系统的设计与实现

点击下载源码 基于SSH的任务调度系统的设计与实现 摘 要 随着科学技术的飞速发展和各行各业的分工愈发明细化&#xff0c;对于改革传统的人工任务调度方式的呼声越来越大。得益于快速发展的计算机技术&#xff0c;我们看到了改革的方向。本系统是针对企业或者事业单位甚至一个…

Golang | Leetcode Golang题解之第234题回文链表

题目&#xff1a; 题解&#xff1a; func reverseList(head *ListNode) *ListNode {var prev, cur *ListNode nil, headfor cur ! nil {nextTmp : cur.Nextcur.Next prevprev curcur nextTmp}return prev }func endOfFirstHalf(head *ListNode) *ListNode {fast : headslo…

camtasia怎么剪掉不用的部分 屏幕录制的视频怎么裁剪上下不要的部分 camtasia studio怎么裁剪视频时长 camtasia怎么剪辑视频教程

有时我们录制的屏幕内容&#xff0c;并不一定全部需要。那么&#xff0c;屏幕录制的视频怎么裁剪上下不要的部分&#xff1f;可以使用视频剪辑软件&#xff0c;或者微课制作工具来进行裁剪。屏幕录制的视频怎么旋转&#xff1f;录制视频的旋转也是一样的&#xff0c;均在编辑步…

万字长文之分库分表里如何优化分页查询?【后端面试题 | 中间件 | 数据库 | MySQL | 分库分表 | 分页查询】

分库分表的一般做法 一般会使用三种算法&#xff1a; 哈希分库分表&#xff1a;根据分库分表键算出一个哈希值&#xff0c;根据这个哈希值选择一个数据库。最常见的就是数字类型的字段作为分库分表键&#xff0c;然后取余。比如在订单表里&#xff0c;可以按照买家的ID除以8的…

【Flutter】 webview_flutter避坑

webview_flutter webview_flutter没有SSL Error接口&#xff0c;也就是说等你的网页出现SSL 错误的时候这个插件无法捕捉处理&#xff0c;除非你改它的源码。 下面这段是webview_flutter官网的例子&#xff0c;它有onHttpError、onWebResourceError、但没有任何捕捉 SSL 错误…

代谢组数据分析(十五):基于python语言构建PLS-DA算法构建分类模型

介绍 本教程描述了一个具有二元分类结果的研究的典型代谢组学数据分析工作流程。主要步骤包括: 从Excel表格导入代谢物和实验数据。基于汇总QC的数据清洗。利用主成分分析可视化来检查数据质量。两类单变量统计。使用偏最小二乘判别分析(PLS-DA)进行多变量分析,包括: 模型…

go语言 fmt的几个打印区别以及打印格式

文章目录 一、打印Print1.1 fmt.Print 和 fmt.Println1.2fmt.Printf1.3 fmt.Sprint, fmt.Sprintf, 和 fmt.Sprintln1.4 fmt.Fprint, fmt.Fprintf, 和 fmt.Fprintln 二、打印格式基本格式动词整数类型浮点数和复数类型字符串和字节切片布尔类型指针 一、打印Print Go 语言的 fm…

字符串类中的常用方法

1 string对象的创建 静态创建 String s1  "abc";  String s2  "abc";  动态创建 String s3  new String("abc"); String s4  new String("abc"); 2string对象的不可变性 任何一个String对象在创建之后都不能对它的…

大数据环境下的房地产数据分析与预测研究的设计与实现

1绪论 1.1研究背景及意义 随着经济的快速发展和城市化进程的推进&#xff0c;房地产市场成为了国民经济的重要组成部分。在中国&#xff0c;房地产行业对经济增长、就业创造和资本投资起到了重要的支撑作用。作为中国西南地区的重要城市&#xff0c;昆明的房地产市场也备受关…

云备份服务端

文件使用工具和json序列化反序列化工具 //文件和json工具类的设计实现 #ifndef __UTIL__ #define __UTIL__ #include<iostream> #include<fstream> #include<string> #include <vector> #include<sys/stat.h> #include"bundle.h" #inc…