美文网首页
一键搭建Web前后端开发服务

一键搭建Web前后端开发服务

作者: zhyuzh3d | 来源:发表于2024-06-09 19:46 被阅读0次

    搭建一个网站开发框架并不简单,至少要满足以下几个要点:

    • 前端:
      • 要有Webpack编译服务,支持ES6语法,能npm install,能import
      • 开发模式自动更新,改一下JS代码页面能马上自动刷新,有热更新HMR
      • 能够顺利访问后端API服务获取数据,方便调试接口
    • 后端:
      • 静态文件服务npm run build编译好的页面要能正常访问,往往要配置Nginx、Apache
      • 动态开发路由服务npm run dev的时候也能访问实时更新
      • 自带接口API路由服务,让前端能够调试API,获取数据

    对于新手来说,安装node、npm和golang并不困难,但配置webpack.config.json一大堆就很头疼,然后还要配置Nginx静态文件服务和接口代理、开发代理,然后再配置Golang开发环境,搞不好几个小时就没了,可能没熬到最后成功,大部分就放弃了...

    如果你是在MacOS苹果系统下想快速搭建一个网站开发框架,可以复制下面代码,保存为a.sh然后终端执行sh a.sh,输入任意文件夹名比如myweb,十几秒,满足以上要点的完整前后端框架就运行起来了,你可以立即编写前端web/src/index.js代码,页面自动刷新,也可以直接编写main.go撰写自己的api接口,然后go run main.go1秒重启API服务。

    运行效果

    推荐直接在VSCode中运行sh命令,默认会弹出终端窗口启动页面开发测试服务,运行在8080端口。你可以随时关掉它,进入web文件夹,npm run dev重新启动。

    Golang服务器默认运行在8081端口,会自动代理静态文件到dev服务器,如果需要代理到build好的静态服务器,请自行修改代码http.HandleFunc("/api", APIHandler)变为http.HandleFunc("/api", StaticFileHandler),重启即可,要做为正式服务器使用,你需要修改端口8081变为80。

    不需要Nginx或者其他,这个Golang程序自带网站静态文件路由功能,无需任何设置。这样做的另一个好处就是文件服务和API接口都由Golang运行在同一端口,可以避免跨域不同源问题。

    确认node、npm、go安装完成且命令可用,然后复制下面代码,保存为a.sh放到任意目录,sh a.sh运行。

    #!/bin/bash
    # 需要修改为可执行文件 chmod +x CreateGoWebProject.sh
    # 然后 sh CreateGoWebProject.sh
    
    # Part1:创建golang项目
    
    # 切换到国内镜像
    go env -w GO111MODULE=on
    go env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct
    
    # 提示用户输入项目名称
    read -p "请输入项目名称: " project_name
    
    # 检查用户是否输入了项目名称
    if [ -z "$project_name" ]; then
      echo "项目名称不能为空。"
      exit 1
    fi
    
    # 创建项目目录并进入
    mkdir "$project_name" && cd "$project_name"
    
    # 初始化项目
    go mod init "$project_name"
    
    # 创建main.go文件
    echo 'package main
    
    import (
        "encoding/json"
        "fmt"
        "net/http"
        "net/http/httputil"
        "net/url"
        "os"
        "path/filepath"
    )
    
    func main() {
        // 创建路由器
        http.HandleFunc("/api", APIHandler)
        http.HandleFunc("/", ProxyHandler)
    
        // 启动服务器
        fmt.Println("Server is running at http://localhost:8081")
        if err := http.ListenAndServe(":8081", nil); err != nil {
            fmt.Printf("Error starting server: %v", err)
        }
    }
    
    // APIHandler 处理 /api 请求
    func APIHandler(w http.ResponseWriter, r *http.Request) {
        jsonData, _ := json.Marshal(map[string]string{
            "message": "API response",
            "status":  "200",
        })
        w.Header().Set("Content-Type", "application/json")
        w.Write(jsonData)
    }
    
    // ProxyHandler 处理所有其他请求并代理到 localhost:8080
    func ProxyHandler(w http.ResponseWriter, r *http.Request) {
        target := "http://localhost:8080"
        targetURL, _ := url.Parse(target)
        proxy := httputil.NewSingleHostReverseProxy(targetURL)
        proxy.ServeHTTP(w, r)
    }
    
    // StaticFileHandler 处理所有其他请求并提供静态文件服务,正式服务器使用
    func StaticFileHandler(w http.ResponseWriter, r *http.Request) {
        staticDir := "./web/dist"
        filePath := filepath.Join(staticDir, r.URL.Path)
        // 检查文件是否存在
        if _, err := os.Stat(filePath); os.IsNotExist(err) {
            http.NotFound(w, r)
            return
        }
        // 提供静态文件服务
        http.ServeFile(w, r, filePath)
    }'> main.go
    
    # Part2:创建ES6-Web项目
    
    # 创建项目目录并进入
    mkdir "web" && cd "web"
    
    # 初始化 npm 项目
    npm init -y
    
    # 安装开发所需的依赖
    npm install --save-dev @babel/core @babel/cli @babel/preset-env webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin
    
    # 创建 Babel 配置文件
    echo '{
      "presets": ["@babel/preset-env"]
    }' > .babelrc
    
    # 创建 Webpack 配置文件
    echo 'const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      entry: "./src/index.js",
      output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
            },
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html",
        }),
      ],
      devServer: {
        static: {
          directory: path.join(__dirname, "dist"),
        },
        compress: true,
        port: 8080,
        open: false, // 自动打开浏览器
        client: {
          logging: "error", // 禁用客户端日志
        },
        devMiddleware: {
          stats: "errors-only", // 只输出错误信息
        },
      },
      mode: "development",
    };' > webpack.config.js
    
    # 创建项目结构
    mkdir src
    echo 'if (!window.isInitialized) {
        window.isInitialized = true
        const greet = async () => {
            const hellostr = `Hello ES6!`
            const root = document.getElementById(`root`)
            root.innerHTML = `<h1>${hellostr}</h1><p>${new Date()}</p>`
            console.log(hellostr)
    
            fetch(`/api`)
                .then(resp => resp.json())
                .then((resp) => {
                    console.log(`/api:`, resp)
                })
        }
        greet()
    }' > src/index.js
    
    echo '<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ES6 Project</title>
    </head>
    
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
    
    </html>' > src/index.html
    
    # 添加构建和启动脚本到 package.json
    npx json -I -f package.json -e 'this.scripts={"build":"webpack","dev":"webpack serve"}'
    
    
    
    # Part3:启动服务
    
    # 查找并杀死占用8080端口的进程
    for port in 8080 8081; do
      echo "Killing processes on port $port..."
      lsof -i tcp:$port | grep LISTEN | awk '{print $2}' | xargs kill -9
    done
    
    
    
    # 新窗口启动Web开放服务器
    CUR_PATH=$(pwd)
    osascript <<EOF
    tell application "Terminal"
        do script "cd \"$CUR_PATH\" && npm run dev"
        activate
    end tell
    EOF
    
    # 启动Golang服务器
    echo "\n站点服务正在启动,请打开下面网址查看:http://localhost:8081"
    cd .. && go run main.go
    
    

    END

    相关文章

      网友评论

          本文标题:一键搭建Web前后端开发服务

          本文链接:https://www.haomeiwen.com/subject/daobqjtx.html