NASA Near-Earth Objects Example
This is a Next.js project bootstrapped with create-next-app
.
It uses server-side rendering (SSR) to call the public NASA NeoWs API to get a list of near Earth objects. More information on the API can be found here.
The app is configured to deploy to Google Cloud's App Engine and Cloud Run.
Getting Started
Get Your NASA API Key
- First, you'll need to get your own API key from NASA. You can do so here.
- Once you have your API key, you'll need to add it to your
.env.local
file as theNASA_API_KEY
value.
Launch the Development Server
First, run the development server:
npm run dev
or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Deploying to Google Cloud
Setup
Run the following commands in Cloud Console to create a project.
gcloud projects create <project-name>
gcloud config set project <project-name>
Before continuing, ensure you have a billing account linked to your new project.
Enable the Compute API in your project.
gcloud services enable compute.googleapis.com
Deploy to App Engine
⚠ Be sure to substitute in your NASA API key in index.js
before deploying!
⚠ While testing deployments, I noticed that App Engine uses yarn
to start the service instance. If you're using npm
, simply
- install
yarn
- delete the
package-lock.json
file - run
yarn build
This should allow you to properly deploy to App Engine.
Create an App Engine service.
gcloud app create --region=us-central
Copy the appengine config files from .gcloud/appengine
to the project root.
cp .gcloud/appengine/*.yaml .
By default, app.yml
is configured to use the Standard Environment without warmup. The contents of app.standard.yml
are the same.
To deploy to the Standard Environment with warmup configured, replace the app.yml
file with app.standard-warmup.yml
.
cp app.standard-warmup.yml app.yml
To deploy to the Flexible Environment, replace the app.yml
file with app.flexible.yml
.
cp app.flexible.yml app.yml
Then deploy the application to App Engine.
yarn build
gcloud app deploy
Deploy to Cloud Run
Before deploying, first enable the Google Cloud APIs needed for Docker auth
gcloud services enable containerregistry.googleapis.com
gcloud services enable run.googleapis.com
gcloud --quiet auth configure-docker
Also, copy the related config files from .gcloud/cloudrun
to the project root.
cp .gcloud/cloudrun/* .
First, build and tag the image
docker build . --tag "gcr.io/<project-name>/nasa-neo-nextjs:latest"
Then, push the image to Google Conatiner Repository (GCR)
docker push gcr.io/<project-name>/nasa-neo-nextjs:latest
Finally, deploy to Cloud Run
gcloud run deploy nasa-neo-nextjs --image gcr.io/<project-name>/nasa-neo-nextjs:latest \
--project <project-name> \
--platform managed \
--region us-central1 \
--allow-unauthenticated