Deploying a NestJS application with Heroku is an easy possibility to host your application. This tutorial is a step-by-step guide for deploying small (side) projects by using GitHub and the Heroku web app (without the CLI). I deployed my Animal Crossing GraphQL application this way.
使用Heroku部署NestJS应用程序很容易托管您的应用程序。 本教程是使用GitHub和Heroku Web应用程序(不使用CLI)部署小型(侧面)项目的分步指南。 我以这种方式部署了Animal Crossing GraphQL应用程序。
先决条件 (Prerequisites)
I assume that you already have:
我假设您已经有:
- npm installed 已安装npm
- Node.js installed (version greater than 8) 已安装Node.js(版本大于8)
- a locally working NestJS application with a package.json 具有package.json的本地工作的NestJS应用程序
- a Heroku account一个Heroku帐户
- a GitHub accountGitHub帐户
1.添加/修改您的.gitignore(1. Add/Modify your .gitignore)
If you don’t already have a .gitignore file, create one in the root folder of your project and add the following lines:
如果您还没有.gitignore文件,请在项目的根文件夹中创建一个文件,然后添加以下行:
/node_modules
/dist
npm-debug.log
.DS_Store
/*.env
This ensures that you don’t commit these files to Git, preventing build artifacts from getting into your GitHub repository.
这样可以确保您不会将这些文件提交到Git,从而防止构建工件进入GitHub存储库。
2.指定您的Node.js版本 (2. Specify your Node.js version)
Heroku needs to know the version of your Node.js runtime, to be able to run it on Heroku. You can check for your node version by running this command in your terminal:
Heroku需要知道您的Node.js运行时的版本,才能在Heroku上运行它。 您可以通过在终端中运行以下命令来检查节点版本:
node --version
Now add this to your package.json
(if you are running e.g. on version 12.16.3
):
现在将其添加到package.json
(如果您正在运行,例如在版本12.16.3
上运行):
"engines": {
"node": "12.16.3"
},
3.指定启动脚本并添加Procfile (3. Specify start script and add Procfile)
If you already started your app you should be familiar with the npm run start
script. If you used the NestJS CLI command nest new <project-name>
for creating your project you should have the following start scripts in your package.json
:
如果您已经启动了应用程序,则应该熟悉npm run start
脚本。 如果您使用NestJS CLI命令nest new <project-name>
来创建项目,则package.json
应包含以下启动脚本:
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
When running your app a dist
folder with a main.js
file is created, which is used for the deployment. You can leave this like this, as this already works perfectly for simple projects.
运行应用程序时,将创建一个main.js
文件的dist
文件夹,该文件夹用于部署。 您可以像这样保留它,因为它已经非常适合简单的项目。
“Heroku apps include a Procfile that specifies the commands that are executed by the app on startup.” (from https://devcenter.heroku.com/articles/procfile)
“ Heroku应用程序包含一个Procfile,用于指定应用程序在启动时执行的命令。” (来自https://devcenter.heroku.com/articles/procfile )
Create a file named Procfile
without a file extension and place it in the root directory. As we want to run the start script, we write it in this file like this:
创建一个没有文件扩展名的名为Procfile
的文件,并将其放在根目录中。 当我们要运行启动脚本时,我们将其写在此文件中,如下所示:
web: npm run start:prod
4.设置正确的端口 (4. Set the correct port)
The web server on your local machine can listen to any open, unreserved port. Heroku needs to listen to a specific port that is set in the PORT
environment variable. To make the server listen on a specific port (e.g. 8080
), when the variable is not set you should adapt your main.ts
as follows:
本地计算机上的Web服务器可以侦听任何打开的,未保留的端口。 Heroku需要监听在PORT
环境变量中设置的特定端口。 要使服务器在特定端口(例如8080
)上侦听,当未设置变量时,应按以下方式修改main.ts
:
await app.listen(process.env.PORT || 8080);
5.创建Heroku应用 (5. Create Heroku app)
Create a new app in your Heroku dashboard at https://dashboard.heroku.com/. After choosing the name and region choose “Connect to GitHub” as a deployment method in the “Deploy” tab and choose the repository you want to deploy. When choosing the automatic deployment, the app automatically gets deployed when your master branch changes. After this, you should see your deployed application 🎉
在https://dashboard.heroku.com/的Heroku仪表板中创建一个新应用。 选择名称和区域后,在“部署”选项卡中选择“连接到GitHub”作为部署方法,然后选择要部署的存储库。 选择自动部署时,当您的主分支更改时,应用程序将自动部署。 之后,您应该看到已部署的应用程序🎉
6.(可选)在生产中启用GraphQL游乐场 (6. (Optional) Enable GraphQL playground in production)
If you use GraphQL in your application and you want to reveal your docs and schema of the app you can enable the playground in production. Please do not do this, if it is not necessary! Revealing this information is a security vulnerability, as it reveals your schema and the introspection query. As I created an API for animal crossing I wanted to share the docs in the playground and needed to enable it. This can be done by explicitly setting introspection
and playground
in app.modules.ts
:
如果您在应用程序中使用GraphQL,并且想要显示应用程序的文档和架构,则可以启用生产环境。 如果没有必要,请不要这样做! 显示此信息是一个安全漏洞,因为它会显示您的架构和自省查询。 在创建用于动物穿越的API时,我想在操场上共享文档并需要启用它。 这可以通过在app.modules.ts
显式设置introspection
和playground
来app.modules.ts
:
@Module({
imports: [
GraphQLModule.forRoot({
introspection: true,
playground: true
}),
],
})
翻译自: https://medium.com/weekly-webtips/deploying-a-nestjs-app-with-heroku-5fa84cb5b6c6