gatsby

by Kristin Baumann

克里斯汀·鲍曼(Kristin Baumann)

如何将静态Gatsby应用程序部署到Heroku (How to deploy a static Gatsby app to Heroku)

This tutorials explains how to set up the deployment of a static GatsbyJS project with Heroku and Github. You will learn how to create a staging and production environment for your application so you’re ready for safe continuous deployment.

本教程说明了如何使用Heroku和Github设置静态GatsbyJS项目的部署。 您将学习如何为您的应用程序创建过渡和生产环境，以便为安全的连续部署做好准备。

After finishing this tutorial, …

完成本教程后，…

• ✈️ you will be able to build and deploy a static Gatsby application.

  ✈️您将能够构建和部署静态的Gatsby应用程序 。

• ? you will be able to trigger automatic deploys to your staging environment by pushing to your git repo. (You can review the staging app and, if suitable, promote it to your production website.)

  ？ 您将可以通过推送到git repo来触发自动部署到s 标记环境 。 (您可以查看登台应用程序，并在合适的情况下将其推广到您的生产网站。 )

Requirements:

要求：

• Your project will be based on (a static site generator). You don’t need any knowledge in coding with Gatsby or React, but you should have and installed.

  您的项目将基于 (静态网站生成器)。 使用Gatsby或React进行编码时，您不需要任何知识，但是您应该安装和 。

• You will need a and account (both available for free). Git needs to be set up on your machine.

  您将需要一个和帐户(均可免费使用)。 需要在您的机器上设置Git。

1.)创建一个新的Gatsby项目 (1.) Create a new Gatsby project)

First, you need a fresh Gatsby project.

首先，您需要一个新的Gatsby项目。

• You can create a new project in the folder test-project by executing the following in our console:

  您可以通过在控制台中执行以下操作，在文件夹test-project创建一个新项目：

gatsby new test-project https://github.com/gatsbyjs/gatsby-starter-hello-world

This creates the essential files for a static Gatsby application from a starter pack. You can start the development server locally by going into the project directory with cd test-project and then running gatsby develop. Your app is now available on localhost:8000.

这将从入门包创建静态Gatsby应用程序的基本文件。 您可以通过使用cd test-project进入项目目录，然后运行gatsby develop development来本地启动开发服务器。 您的应用程序现在可以在localhost:8000 。

2.)设置一个git repo (2.) Set up a git repo)

With the project running locally, you can now set up a git repository for your Gatsby project.

随着项目在本地运行，您现在可以为Gatsby项目设置一个git存储库。

• Log into Github and create a new repo.
  登录Github并创建一个新的仓库。
• Initialise a git repo in your project with:
  使用以下命令在您的项目中初始化git repo：

git init

• Connect your local git repo to your remote repo with:
  使用以下命令将本地git存储库连接到远程存储库：

git remote add origin 
    

• Make your initial commit of the Gatsby project with:
  使用以下命令来首次提交Gatsby项目：

git add .git commit -m "Initial commit"git push origin master

The changes in your Gatsby project are now tracked with Github, which will provide the trigger to start a deployment later on.

现在，您可以使用Github跟踪Gatsby项目中的更改，这将为以后启动部署提供触发条件。

3.)设置Heroku应用 (3.) Set up Heroku apps)

As a next step, you can configure the continuous deployment environments on Heroku.

下一步，您可以在Heroku上配置连续部署环境。

• Create a new pipeline called test-project in the Heroku app dashboard

  在Heroku应用仪表板上创建一个名为test-project的新管道

• Within this pipeline, create a new app for the staging environment called test-project-staging and a new app for production called test-project-prod

  在此管道中，为暂存环境创建一个名为test-project-staging的新应用程序，为生产环境创建一个名为test-project-prod的新应用程序

• Connect the pipeline (not each app individually) with your previously created Github repo
  将管道(不是每个应用程序单独连接)与先前创建的Github存储库
• Enable automatic deployments from the master branch for the staging app (but not for the production app!)
  从master分支为登台应用程序启用自动部署(但不为生产应用程序启用！)
• Set the buildpacks for both apps to:
  将两个应用程序的构建包设置为：

"heroku/nodejs"

"https://github.com/heroku/heroku-buildpack-static"

These buildpacks are scripts that run when your app is deployed and are specific for your static Gatsby project. You can configure the static buildpack in the next step.

这些构建包是在部署应用程序时运行的脚本，并且特定于您的静态Gatsby项目。 您可以在下一步中配置静态buildpack。

4.)准备将Gatsby项目部署到Heroku (4.) Prepare your Gatsby project for deployment to Heroku)

• After your code is copied to Heroku and the necessary dependencies are installed, the Gatsby project needs to be build and stored in the static /public folder. Therefore add a build script in your package.json file:

  将代码复制到Heroku并安装必要的依赖项后，需要构建Gatsby项目并将其存储在静态/ public文件夹中。 因此，在您的package.json文件中添加一个构建脚本：

{     // ...

scripts: {         // ...

“heroku-postbuild”: “gatsby build”

},

// ...}

• Create a file called app.json in the root directory of your project. This file includes general information required to run an app on Heroku. In our case we state again the usage of the two buildpacks:

  在项目的根目录中创建一个名为app.json的文件。 该文件包括在Heroku上运行应用程序所需的常规信息。 在我们的例子中，我们再次声明两个buildpack的用法：

{

"buildpacks": [

{ "url": "heroku/nodejs" },

{ "url": "https://github.com/heroku/heroku-buildpack-static" }

]

}

• Create a file called static.json in the root directory of your project. The static.json file is used for the configuration of the static buildpack. You can view more configuration options . In this case we only define the folder of our built application:

  在项目的根目录中创建一个名为static.json的文件。 static.json文件用于配置静态buildpack。 您可以查看更多配置选项。 在这种情况下，我们仅定义构建的应用程序的文件夹：

{

"root": "public/"

}

• (Optional) Heroku’s deployment will fail when you have a package-lock.json as well as a yarn.lock file in your project directory. When this is the case, decide on one. For example, delete the package-lock.json file in case you are using yarn.

  (可选)当您的项目目录中有package-lock.json和yarn.lock文件时，Heroku的部署将失败。 在这种情况下，请选择一个。 例如，如果您使用yarn，请删除package-lock.json文件。

5.)测试您的设置 (5.) Test your setup)

Congratulations, pretty much done! ?

恭喜，您已经完成了！ ？

You can now test your setup by committing the changes from the last step to Github:

现在，您可以通过执行从最后一步到Github的更改来测试您的设置：

git add .git commit -m "Prepared Heroku deployment of Gatsby app"git push origin master

This is should trigger an automatic build and deployment of your Gatsby project to the staging environment. You can then review the staging app and, if suitable, promote it to your production website.

这应该会触发您的Gatsby项目自动构建并将其部署到登台环境。 然后，您可以查看登台应用程序，并在合适的情况下将其推广到您的生产网站。

Thanks for reading this article! Please leave questions or feedback and follow me on for more JavaScript and React related posts.

感谢您阅读本文！ 请留下问题或反馈，并在关注我，以获取更多JavaScript和React相关文章。

翻译自:

gatsby