Effective Deployment Guidance of Next.JS Static Website on Google Cloud Storage

Photo by Growtika on Unsplash

My experimental web project (ClearMyList.io) based on Next.js, Google Cloud Functions, MongoDB and some other technologies have been started recently. I suppose this could be an item of my resume either, therefore, both deployment and public accessibility are what I should be concerned about. And the most important thing is, I don’t want it to cost much on this.

Static website deployment is my top choice, because any server — including the virtual machine — is way more expensive than a storage bucket. I read plenty of technical posts on this topic. Unfortunately, none of them can give me a hand to finish the whole process. For instance, some of them were published 3 or 4 years ago, but the configuration of Google Cloud Console has been changed after their publication. On the other hand, some of them lack figures, sometimes it’s hard to understand the authors’ purposes. Anyway, I wish I could make this article short, as nobody wants to read my bullshit. OK, let’s cut to the chase.

First of all, I should have a production generation of my Next.js project. For doing this, we shall put something into next.config.js file like the following:

module.exports = withTM({
  output: 'export',
  distDir: 'dist',
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production'
  },
  images: {
    unoptimized: true // You may need this if there's any relevant error occurring while building.
  },
  ...
});

Then, append a generate script to the package.json file for simplifying the building procedure.

{
  ...
  "scripts": {
    ...
    "generate": "next build&&next export -o output",
    ...
  }
  ...
}

Fine then, if everything goes well, you can get the output folder with all contents of the static website you want to deploy after run yarn generate or npm run generate . Let’s head to the Google Cloud Storage bucket right now.

You can finish the creation and configuration by following this wizard, it’s quite simple, every step you can choose the suitable option according to your expectation.

You can create your own bucket with reference to the above configurations and make some necessary changes, the only option you shall concern is Enforce public access pervention on this bucket, I suggest you leave it unchecked as the official document mentions: You should not use public access prevention if you need to keep the bucket public for use cases such as static website hosting.

After you created this new bucket, that means you have an online folder to host all the files and resources of your static website. At this step, you should upload all of them to this bucket. If you feel it inconveniently to upload multiple folders from Google Cloud Console, I highly recommend you to use gcloud CLI, which is the essential tool if you are a user of Google Cloud. If you haven’t installed it yet, please follow its official guidance.

gcloud storage cp output/* gs://[bucket-name] --recursive

Then go to the Permissions tab, you shall see it’s Not public in Public access card, don’t worry. Now click the Grant Access button, input allUsers to New principals text field, and choose Storage Object Viewer in the Role drop-down list in Cloud Storage section, and click the Save button, there will be a confirmation dialog asking if you want to make this resource public, click the Allow Public Access button with no doubt.

And then, this bucket is public to the Internet.

OK, let’s go back to the bucket list page of your current project, click the menu icon with three dots at the end of the bucket info row, choose Edit website configuration option and set index and error pages.

It’s time to configure load balancer now, turn to Load Balancer page, click the Start configuration button at the bottom of the HTTP(S) Load Balancing card, and just keep the default choices if it’s like following, and click the Continue button.

Tip: You can switch to Global HTTP(S) Load Balancer (classic) if the default option always leads to an error.

Then configure your frontend.

In the Backend configuration section, a dialog will be prompted when you click the Backend services & backend buckets drop-down list, and then click the Create A Backend Bucket button. Then you can set a bucket name whatever you want, and choose the bucket which hosts your website content from the Cloud Storage bucket list, and don’t forget to click the Create button.

After a few seconds for the automatic configuration process, I believe you will get an IP for your website, and you can test if its accessibility is OK now.

Once the whole procedure works, I recommend the last script in package.json :

{
  ...
  "scripts": {
    ...
    "deploy": "rm -rf dist&&rm -rf output&&yarn generate&&gcloud storage cp output/* gs://[bucket-name] --recursive",
    ...
  }
  ...
}

Eventually, we have done the deployment of static website generated by Next.js or other frameworks on Google Cloud Storage. If everything goes well until here, you’re welcome. And if you have any issues during this procedure, I’m happy to discuss them with you. Otherwise, if you can share any suggestions to make these steps easier and shorter, that would be very appreciated!