如何使用Heroku部署Live2D Web App

2020年12月30日10:49:47 发表评论 59 次浏览

本文概述

什么是Live2D?

Live2D是一项技术, 使艺术家可以轻松地转换传统2D插图以创建流畅的表情和动作。

用于Live2D建模和动画的最流行的软件是Cubism, 它也提供了针对Web, 本地应用程序和Unity游戏开发引擎的有据可查的SDK。

在本教程中, 我将指导你如何在Cubism的Live2D Web SDK官方示例之上构建并将其部署到流行的云应用托管平台Heroku。

如何建立环境

要继续学习本教程, 请克隆我的GitHub存储库并签出开始科。完成的项目在发展科。

我也录过YouTube上的视频教程.

RuolinZheng08 / heroku-live2d

通过在GitHub上创建一个帐户为RuolinZheng08 / heroku-live2d开发做出贡献。

如何使用Heroku部署Live2D Web App1

郑若琳08

的GitHub

如何使用Heroku部署Live2D Web App2
git clone https://github.com/RuolinZheng08/heroku-live2d.git
git checkout start

# update the submodule, Cubism's Live2d Web Framework
git submodule update --init

使用Homebrew安装Node.js和npm:

# if you need to install homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# homebrew will install node and npm at the same time
brew install node

我将使用Visual Studio Code作为我的主要IDE, 但是你可以选择使用任何编辑器。

如何在本地运行启动程序代码

目录结构如下。我们的网络应用将从样本/ TypeScript /演示.

.
├─ .vscode          # Visual Studio Code project setting
├─ Core             # Live2D Cubism Core JavaScript and TypeScript source code
├─ Framework        #  Source code for the rendering and animation features
└─ Samples
   ├─ Resources     # Live2D model files and web image assets
   └─ TypeScript    # [IMPORTANT] TypeScript sample project

在 - 的里面heroku-live2d目录, 运行以下命令:

cd Samples/TypeScript/Demo/

npm install

npm run-script build

npm run-script serve

导航http:// localhost:5000 / Samples / TypeScript / Demo /并且你应该能够看到Live2D角色。

要与模型交互, 请按住鼠标光标, 角色的头部和眼睛将跟随你的光标。点击角色的身体以查看特殊动画。点击右上角的齿轮图标可在不同型号之间切换。

如何使用Heroku部署Live2D Web App3

标记为

样品/资源/标记

如何部署到Heroku

入门代码使用npm, TypeScript和webpack。

要将我们的项目部署到Heroku, 我们需要创建一个package.jsonHeroku可以用来在我们的项目根目录中构建我们的项目的文件。我们还需要修改样本/TypeScript/Demo/package.json和中的webpack配置样本/TypeScript/Demo/webpack.config.js.

顶级package.json

样板package.jsonNode.js Heroku应用程序的外观如下所示:

{
    "name": "heroku-live2d", "description": "Live2D Cubism Heroku Demo", "scripts": {
        "start": ..., "build": ...
    }, "dependencies": {
    	...
    }
}

检查依存关系和devDependencies中的属性样本/TypeScript/Demo/package.json并添加两组依赖项为依存关系toheroku-live2d / package.json.

请记住, 在本地构建和服务时, npm运行脚本[build | serve]从内部样本/ TypeScript /演示目录。

因此, 要从项目根目录运行这些npm命令, 我们需要预先添加cd样本/ TypeScript /演示在npm命令之前。例如, build命令将变为:

cd Samples/TypeScript/Demo && npm run-script build

通过这些更改, 顶级package.json应该看起来像这样:

{
    "name": "heroku-live2d", "description": "Live2D Cubism Heroku Demo", "scripts": {
        "start": "cd Samples/TypeScript/Demo && npm run-script start", "build": "cd Samples/TypeScript/Demo && npm run-script build"
    }, "dependencies": {
        "@typescript-eslint/eslint-plugin": "^2.18.0", "@typescript-eslint/parser": "^2.18.0", "eslint": "^6.8.0", "eslint-config-prettier": "^6.10.0", "eslint-plugin-prettier": "^3.1.2", "prettier": "^1.19.1", "rimraf": "^3.0.1", "serve": "^11.3.0", "ts-loader": "^6.2.1", "typescript": "^3.7.5", "webpack": "^4.41.5", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1", "whatwg-fetch": "^3.0.0"
    }
}

样本/TypeScript/Demo/package.json

在localhost上, 我们在端口5000上运行。但是, Heroku将为我们的Web应用程序动态分配一个存储在变量中的端口$ PORT。因此, 我们需要npm运行脚本开始内部命令样本/TypeScript/Demo/package.json在端口上启动webpack服务器$ PORT.

附加到脚本>开始> webpack-dev-server --progress所以看起来像这样:

"scripts": {
    "start": "webpack-dev-server --progress --port $PORT", ...
}

样本/TypeScript/Demo/webpack.config.js

加disableHostCheck到的配置devServer并删除港口因为我们已经在上面动态配置了它。

module.exports = {
    ..., devServer: {
        contentBase: path.resolve(__dirname, '../../..'), watchContentBase: true, inline: true, hot: true, port: 5000, // delete this line
        host: '0.0.0.0', disableHostCheck: true, // add this line
        compress: true, useLocalIp: true, writeToDisk: true
    }, ...
}

加watchOptions这样我们node_modules不会被观看。如果我们不这样做, 当部署到Heroku时, 我们将遇到关于超出观察者最大数量的错误。

module.exports = {
    ..., watchOptions: {
    	ignored: /node_modules/
    }, ...
}

部署到Heroku

要下载Heroku命令行客户端, 请运行

brew tap heroku/brew && brew install heroku

使用以下命令从命令行登录到Herokuheroku登录.

创建一个Heroku应用程序, 并在应用程序名称后附加一些数字(例如123), 以确保唯一性。

heroku create heroku-live2d-NUMBERS

将Node.js设置为buildpack:

heroku buildpacks:set heroku/nodejs

使用git添加并提交你的项目。请注意, 我们不一定需要git推:

git add .
git commit -m "Ready to deploy to heroku"

假设你遵循以下步骤, 则将项目推送到Heroku开始科。你始终可以检查你所在的分支, 然后从该分支进行推送。

# check which branch we are on
git branch

# the syntax is
# git push heroku GIT_BRANCH_NAME:HEROKU_BRANCH_NAME
git push heroku start:master

你可能需要等待几分钟, 以完成构建过程。

之后, 导航到YOUR-HEROKU-APP-NAME.herokuapp.com/Samples/TypeScript/Demo。就我而言, URL是https://heroku-live2d.herokuapp.com/Samples/TypeScript/Demo/。 Live2D角色将在那里欢迎你:)

如何使用Heroku部署Live2D Web App4

请注意, 突出显示的URL已经在Heroku上

如何将index.html重定向到Samples / TypeScript / Demo

你可能已经注意到YOUR-HEROKU-APP-NAME.herokuapp.com显示目录结构列表, 而不是Live2D模型。我们可以通过添加一个虚拟顶级来解决这个问题index.html重定向到样本/ TypeScript /演示.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- Just a dummy html to redirect to my subdirectory -->
    <meta http-equiv="refresh" content="0; url=Samples/TypeScript/Demo">
</head>

<body>

</body>

</html>

重新运行部署命令git push heroku start:master。现在, 当你访问YOUR-HEROKU-APP-NAME.herokuapp.com, 你将被自动重定向到Live2D模型页面。

祝贺你完成本教程的结尾!现在, 你已经将Live2D Web App部署到了Heroku。

我希望你喜欢本教程。让我们保持联系!与我联系领英, 的GitHub, 中或签出我的个人网站.

资源与链接

本教程的我的GitHub存储库

我的Heroku应用

我的YouTube视频教程

立体主义的官方SDK文档

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: