javascript - 使用 Gatsby 将静态网站部署到 Google Cloud

Question

我一直在尝试在 Google Cloud Platform 上部署我使用 Gatsby 制作的静态应用。

我的问题是 app.yaml 文件。

• 这是我到目前为止所做的:

  1. 做了一个 Gatsby 项目。

  2. Gatsby 构建。

  3. 已将公用文件夹上传到 GCS 存储桶。

  4. 使用以下命令将其复制到 Google Cloud Shell:gsutil rsync -r gs://static-site-test ./gatsby-test

  5. cd Gatsby 测试

  6. 创建了一个 app.yaml 文件:

  7. gcloud 应用部署

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: public/
  upload: public/index.html
- url: /
  static_dir: public/static

• 应用程序的第一页加载正常，但任何指向其他页面的链接都不起作用。

• 我想我的问题出在 app.yaml 上，我不知道如何正确填写它。

• 这是我的公用文件夹:

我有多个页面。

page-2 和 about 文件夹都包含一个 index.html 文件。

有什么想法吗？

我尝试了以下方法:

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: public/index.html
  upload: public/index.html
- url: /page-2
  static_dir: public/page-2/index.html

还有

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: public/index.html
  upload: public/index.html
- url: /page-2
  upload: public/page-2/index.html

虽然我希望这种方法不对，因为如果我有多个页面，这会变得很麻烦。

这是我的索引页:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>

    <Link to="about">Go to about</Link>
    <p>paragrap h</p>
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a word</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  </Layout>
)

export default IndexPage

我的结果是我只能访问 index.html 页面，但是当我点击链接时，我得到了“找不到页面错误”。

编辑:

我更改了我的 app.yaml 但现在我的图片有问题

runtime: python27
api_version: 1
threadsafe: true

handlers:

#site root
- url: /
  static_files: public/index.html
  upload: public/index.html

# page-2
- url: /page-2/
  static_files: public/page-2/index.html
  upload: public/page-2/index.html

# Page not found
- url: /.*
  static_files: public/404/index.html
  upload: public/404/index.html

  # image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
  static_files: public/\1
  upload: public/(.*\.(bmp|gif|ico|jpeg|jpg|png))

层次结构如下:

\公开\静态

├────6d91c86c0fde632ba4cd01062fd9ccfa

│ ├───59139

│ ├───af144

│ ├───b5207

│ ├───d3809

│ ├───e22c9

│ └────fdbb0

└────d

在这些随机文件夹中是图像。

我还让我的图片直接显示在 public/文件夹中，但仍然不起作用。

以下是我如何使用图像:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import logo from "../images/gatsby-icon.png"
import logo2 from "../../static/secondicon.png"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>

    <Link to="about">Go to about</Link>
    <p>paragrap h</p>
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a word</p>
      <img src={logo} alt="" />
      <p>Second icon:</p>
      <img src={logo2} alt="" />
    </div>
  </Layout>
)

export default IndexPage

这是部署:https://static-site-test-256614.appspot.com/

我只是想以错误的方式部署吗？我应该为此使用其他东西吗？

Answer 1

以下 app.yaml 文件应该与 Gatsby 快速入门一起正常工作 example :

runtime: python27
api_version: '1'
threadsafe: true

handlers:

  - url: /
    static_files: public/index.html
    upload: public/index.html

  - url: /((.*\/)*[^\/]+\.[^\/]+)$
    static_files: public/\1
    upload: public/.*

  - url: /(.*)$
    static_files: public/\1/index.html
    upload: public/.*/index.html

可以引用以下post有关服务静态网站时 app.yaml 配置的更多示例以及以下 documentation对于所有 app.yaml 元素。