跳到主要内容

如何发布一个网站？

如果您发布的不是单一的API，而是一个网站，那么，在打包部署的时候，您可以指定一个服务上下文路径来满足网站内部资源访问或跳转等。

URL前缀​

平台发布的API会有一个统一格式的URL前缀，/public/USERID-DEPID/VERSION，例如：/public/1-2/v3。
其中VERSION代表API的版本，同时也可以做为用户自定义的服务上下文路径。

部署时指定服务上下文路径​

dep

发布API时版本号将被服务上下文路径取代，且不能修改​

api

使用服务上下文路径​

以下示例使用Nodejs + express + ejs

使用 CONTEXT_PATH 环境变量​

配置文件 config.js
var env = process.env.NODE_ENV || "dev";
var root = process.env.CONTEXT_PATH || "demo";
if (root.indexOf("/") < 0) {
    root = "/" + root;
}

var config = {
    dev: {
        server: {
            port: 8088,
            root: root
        },
        logger: {
        }
    }
}

var exports = module.exports = config[env];

后端API路径 不需要 添加 CONTEXT_PATH，因为平台在接收服务请求时会自动去掉前缀​

Web服务 server.js
var express = require("express");
var config = require("./config").server;

exports = module.exports = {
    start: start
}

function start() {
    app();
    logger.info("Start app server[pid is %d] listening on port %d ...", process.pid, config.port);
}

function app() {
    var app = express();
    var server = require("http").createServer(app);

    // Views engine
    app.set("views", "views");
    app.engine(".html", require("ejs").renderFile);
    app.set("view engine", "ejs");

    // server
    _server(app);

    // listen
    server.setTimeout(1800 * 1000);
    server.listen(config.port, "0.0.0.0");

    function _server(app) {
        var router = express.Router();

        // Static
        router.use(express.static("static"));

        // Body parser
        var bodyParser = require("body-parser");
        router.use(bodyParser.json({ "limit": "10000kb" })); // for parsing application/json
        router.use(bodyParser.urlencoded({ // for parsing application/x-www-form-urlencoded
            limit: "10000kb",
            extended: true
        }));

        var cookieParser = require("cookie-parser");
        router.use(cookieParser());

        // views - html
        router.get("*", function (req, res) {
            var path = req.path;
            path = path.substring(1);
            var parts = path.split("/");
            var name = parts[parts.length - 1];
            res.render(path + ".html", {
                name: name,
                config: config, // 传递config
            }, function (err, html) {
                if (err) {
                    logger.error(err.toString());
                    res.render("404.html", {
                        name: "404",
                        config: config,
                        title: "Not Found"
                    });
                } else {
                    res.send(html);
                }
            });
        });

        // Listen - 此处不要加上CONTEXT_PATH
        app.use("/", router);
    }
}

页面跳转URL​

使用 config.root 做为前缀​

<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link<%=name == 'home' ? ' active' : ''%>" href="<%=config.root%>/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<%=name == 'scene' ? ' active' : ''%>" href="<%=config.root%>/scene">使用场景</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<%=name == 'study' ? ' active' : ''%>" href="<%=config.root%>/study">学习交流</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

页面中的静态资源​

使用 config.root 做为前缀​

<html>
    <title>测试网站</title>
    <link rel="icon" type="image/svg+xml" href="<%=config.root%>/res/images/logo.svg">
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="<%=config.root%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=config.root%>/res/icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="<%=config.root%>/css/style.css" rel="stylesheet">
    <script src="<%=config.root%>/js/lib/main.js"></script>
</html>

省略前缀的方法​

如果您构建的网站，前端是一个单页模型，例如：使用push / pop state 或者 hash /# 的形式进行页面跳转，可以采用静态资源使用相对路径的访问方式

<html>
    <title>测试网站</title>
    <link rel="icon" type="image/svg+xml" href="res/images/logo.svg">
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="res/icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/lib/main.js"></script>
</html>