Deploy static website to Google Cloud made with Gatsby

Question

I have been trying to deploy my static app made with Gatsby on Google Cloud Platform.

My trouble is with the app.yaml file.

• Here's what I've done so far:

  1. Made a Gatsby project.

  2. Gatsby build.

  3. Uploaded the public folder to a GCS bucket.

  4. Copied it to the Google Cloud Shell using the following command: gsutil rsync -r gs://static-site-test ./gatsby-test

  5. cd gatsby-test

  6. Created an app.yaml file:

  7. gcloud app deploy

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

• The first page of the application loads fine, but any links to other pages do not work.

• I think my trouble is with the app.yaml, I don't understand how to fill it out properly.

• Here's my public folder:

I have multiple pages.

Both the page-2 and the about folders contain an index.html file.

Any thoughts?

I have tried the following:

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

also

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

Although I hope this method isn't right because if I have multiple pages, this can become cumbersome.

Here's my index page:

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

My results were that I could only access the index.html page, but when clicking the links, I got a "Page not found error".

Edit:

I changed my app.yaml but now i'm having trouble with my images

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))

The hierarchy is as follows:

\PUBLIC\STATIC

├───6d91c86c0fde632ba4cd01062fd9ccfa

│ ├───59139

│ ├───af144

│ ├───b5207

│ ├───d3809

│ ├───e22c9

│ └───fdbb0

└───d

And inside those random folders are the images.

I also made that my images show directly into the public/ folder but still doesn't work.

Here's how i'm using the images:

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

here's the deployment: https://static-site-test-256614.appspot.com/

Am i just trying to deploy the wrong way? should i just use something else for this?

Answer 1

The following app.yaml file should work correctly with the 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

You can refer to the following post for more examples of app.yaml configurations when serving static websites and the following documentation for all the app.yaml elements.