published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. So the generated content is hosted on Heroku with basic authentication.

In this post, we’ll do something similar using AWS. It’s very easy and took me couple of minutes to figure it out. I’ll not go into detail but only share the steps and related links. So, it won’t be a long post. Let’s start.

  1. Create an S3 bucket. Enable static website hosting and block all public access in the bucket configuration. We’ll allow access only through Cloudfront.

  2. Go to CloudFront, distributions and create a new one. Add the S3 bucket you’ve just created as an origin. While configuring the origin select “use OAI” in S3 bucket access section. Optionally, you can define a custom domain name too.

  3. Now, you should be able to access to the content hosted in S3 bucket via the domain name of the cloudfront distribution. You can upload a simple index.html manually to the S3 bucket to test it.

  4. To have basic authentication we’ll use CloudFront Functions. Create a new function, copy paste the code below which is originally copied from here.

var USERNAME = 'USERNAME';
var PASSWORD = 'PASSWORD';

var response401 = {
  statusCode: 401,
  statusDescription: 'Unauthorized',
  headers: {
    'www-authenticate': {value:'Basic'},
  },
};

function validateBasicAuth(authHeader) {
  var match = authHeader.match(/^Basic (.+)$/);
  if (!match) return false;

  var credentials = String.bytesFrom(match[1], 'base64').split(':');

  return credentials[0] === USERNAME && credentials[1] === PASSWORD;
}

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  var auth = (headers.authorization && headers.authorization.value) || '';

  if (!validateBasicAuth(auth)) return response401;

  return request;
}
  1. Return back to CloudFront distribution you’ve configured. Go to behaviours, you’ll see a single behaviour with path pattern ‘Default (*)’. Edit it, go to Function associations and select the basic authentication function for Viewer request.

  2. Optionally, you can configure different behaviours for different Path patterns instead of adding basic auth for whole site (*), you can add it for specific paths specific_path/*.

  3. You are done on the AWS side. Now you’ll need a job to that will push your static content to the S3 bucket. This part can be configured via Gitlab CI/CD, Github Actions or whatever you use.

This time I’ve used GitHub Actions and it went very easy with s3-sync-action.

  1. To be able to push content to S3 we’ll need access_key_id and secret_access_key and the user related to these keys should’ve permissions to read/write on the S3 bucket we use. Go to IAM service in AWS console, create a new user if you don’t have a suitable one. Make sure the user have permissions for S3 service. Go to security credentials tab of the user and create a access key. Copy the credentials somewhere safe. You’ll use them to push content to the S3 bucket.

Good job, have fun!

Published on 10.07.2022 by Mert Bakır with commit 4866d43.
dev-ops
#dev-ops #static-site
published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …