This blog describes how to host a static website using open web services in Eyevinn Open Source Cloud. The static website is hosted on a bucket provided by the MinIO storage service based on open source.
Why Open Source Cloud for hosting a static website?
Using an open web service based on open source you are not locked in with a specific vendor and you have the option to run the very same code in your own infrastructure or cloud.
Create an account for free at app.osaas.io and create your tenant. If you already have access to Eyevinn Open Source Cloud you can skip this step.
Step 1: Create a Hello World application
In this tutorial we will start by creating a Hello World application in React. We assume that you have NodeJS installed. Create a new React application by running the following command.
% npx create-react-app hello-world Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y
This will create a new directory called “hello-world” containing all the necessary files and dependencies for your React application.
Move into your new app’s directory:
% cd hello-world
Start the development server by running the following command.
% npm start
Your browser will open with this sample application.
Step 2: Build the application
Build the application to generate the static website. As it will be deployed to a subfolder we need to provide that information when building the website. We do that by setting the environment variable PUBLIC_URL when we build the application.
% PUBLIC_URL=/hello/ npm run build
The generated website is available in the folder called “build” in your directory.
Step 3: Deploy the build
Go to the web console of Eyevinn Open Source Cloud and obtain the access token available under Settings. Copy the token and store it in the environment variable OSC_ACCESS_TOKEN.
% export OSC_ACCESS_TOKEN=YOUR_TOKEN
Now run the following command to deploy the build. We name the website “hello” which will be the subfolder where the files are placed.
% npx @osaas/cli@latest web publish -s hello build/ Website published at: https://eyevinnlab-hello.minio-minio.auto.prod.osaas.io/hello/index.html CDN settings: - Origin: eyevinnlab-hello.minio-minio.auto.prod.osaas.io - Origin Headers: 'Host: eyevinnlab-hello.minio-minio.auto.prod.osaas.io' - Origin Path: hello - Default root object: index.html
In this example the website is published and available at https://eyevinnlab-hello.minio-minio.auto.prod.osaas.io/hello/index.html
Step 4: Configure CDN
For performance and security you want to use a CDN provider for the delivery of the website. Now we also have the option to skip the subfolder and place the website in the root of the domain. To prepare for that we will rebuild the application without the PUBLIC_URL environment variable set.
% npm run build % npx @osaas/cli@latest web publish -s hello build/
The files will be uploaded to the folder “hello” so when we configure the CDN we need to set that path in the request to the origin. When you setup your distribution property at your CDN provider you will then use the following in this example:
- Origin: eyevinnlab-hello.minio-minio.auto.prod.osaas.io
- Protocol: HTTPS
- Port: 443
- Origin Path: /hello/
- Origin Host Headers: eyevinnlab-hello.minio-minio.auto.prod.osaas.io
- Default root object: index.html
Now the website will be available at https://
Conclusion
With the open web service providing static website hosting in Eyevinn Open Source Cloud you always have the option to run the same solution on your own premises as it is based on open source. You can create one website including 50 GB storage for free to try this out.