Deploy static website to Google Cloud made with Gatsby(将静态网站部署到Gatsby打造的Google Cloud)

本文介绍了将静态网站部署到Gatsby打造的Google Cloud的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我的问题是app.yaml文件。

  • 以下是我到目前为止所做的工作：

    1. 创建了Gatsby项目。

    2. Gatsby版本。

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

    4. 使用以下命令将其复制到Google Cloud Shell：gsutil rsync-r gs：//静态站点-测试。/Gatsby-test

    5. CD Gatsby-test

    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="SG9tZQ==" />
    <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="IiAvJmd0OwogICAgJmx0Oy9kaXYmZ3Q7CiAgJmx0Oy9MYXlvdXQmZ3Q7CikKCmV4cG9ydCBkZWZhdWx0IEluZGV4UGFnZQoKPC9jb2RlPjwvcHJlPgoKPHA+5oiR55qE57uT5p6c5piv5oiR5Y+q6IO96K6/6ZeuaW5kZXguaHRtbOmhtemdou+8jOS9huWcqOWNleWHu+mTvuaOpeaXtu+8jOaIkeaUtuWIsOS6hg=="Page Not Found Error"(找不到页面错误)。

编辑：

我更改了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))


层次结构如下：

PUBLICSTATIC

├───6d91c86c0fde632ba4cd01062fd9ccfa

│├───59139

│├───af144

│├───b5207

│├───d3809

│├───e22c9

│└───fdb0

└───%d

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

我还使我的图像直接显示在公用/文件夹中，但仍然不起作用。

以下是我使用图像的方式：

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="SG9tZQ==" />
    <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="IiAvJmd0OwogICAgICAmbHQ7cCZndDtTZWNvbmQgaWNvbjombHQ7L3AmZ3Q7CiAgICAgICZsdDtpbWcgc3JjPXtsb2dvMn0gYWx0PQ=="" />
    </div>
  </Layout>
)

export default IndexPage


以下是部署：https://static-site-test-256614.appspot.com/

我只是试图以错误的方式进行部署吗？我是否应该为此使用其他工具？推荐答案以下app.yaml文件应该可以与Gatsby QuickStart一起正常工作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配置示例，以及以下针对所有app.yaml元素的documentation配置示例。

                        这篇关于将静态网站部署到Gatsby打造的Google Cloud的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！