Развертывание статического веб-сайта в Google Cloud с помощью Gatsby

Question

Я пытался развернуть мое статическое приложение, созданное с помощью Gatsby, на облачной платформе Google.

Моя проблема в файле app.yaml.

• Вот чтоЯ уже сделал:

  1. Сделал проект Gatsby.

  2. Сборка Gatsby.

  3. Загрузил общую папку в корзину GCS.

  4. Скопировал ее в Google Cloud Shell с помощью следующей команды: gsutil rsync -r gs: // static-site-test ./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, я не понимаю, как правильно его заполнить.

• Вот моя общая папка:

У меня несколько страниц.

Обе страницы-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))

Иерархия выглядит следующим образом:

\ PUBLIC \ STATIC

├───6d91c86c0fde632ba4cd01062fd9ccfa

│ ├───59139

│ ├───af144

│ ├───b5207

│ ├───d3809

│ ├───e22c9

│ └───fdbb0

└───d

И внутри этих случайных папок находятся изображения.

Я также сделал так, чтобы мои изображения показывалиdпрямо в public / folder, но все еще не работает.

Вот как я использую образы:

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 пример :

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

Вы можете обратиться к следующей записи для получения дополнительных примеровКонфигурации app.yaml при обслуживании статических веб-сайтов и следующая документация для всех элементов app.yaml.