CODEWITHSUNDEEP
google-cloud-platformgoogle-cloud-storage
Mohd Shahid
Mohd Shahid

Reputation: 1606

How to host a private static web site in Google Cloud Storage?

I want to host a static web app containing HTML/CSS/JS only and some interlinking between HTML pages.

I am successfully able to access the app if I make the bucket public but I don't want to make the app public and I want that only authenticated users (People of the organization) can access that app.

When I make it private then CSS/JS stops working because the index.html can not access those files due to permission issue.

How to achieve this?

Upvotes: 5

Views: 4134

Answers (2)

Ark-kun
Ark-kun

Reputation: 6787

You can solve this by adding the <base> tag inside <head>:

<base href="https://storage.cloud.google.com/<bucket>/path/to/site/root/"/>

Normal CSS and JS will work. However calling fetch to load additional files might not work due to CORS.

Upvotes: 2

guillaume blaquiere
guillaume blaquiere

Reputation: 75745

As said by John, you can't achieve this with Cloud Storage. However you can use App Engine standard with IAP.

For this, get your sources and build a app.yaml file with this content

runtime: python3

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /statics
  static_dir: statics

- url: /.*
  script: index.html

Then deploy it gcloud app deploy

Then, go to identity aware proxy page and activate IAP for your App Engine service.

Finally, you can select your App Engine service, go on the info panel on the right and click on add member. You can add a single user, a group or a company. (all needs to have a Google Account. Works well with Google Workspace company for example); and add the role IAP secured Web App user

enter image description here

Upvotes: 9

Related Questions