TIL GitLab CD to deploy my Vue.js app permalink

Building on what I learned last week, I deployed my Vue.js application to Amazon Web Services (AWS) using GitLab’s CI/CD.

I host all my personal, private repositories in GitLab. I only keep a public presence in GitHub, but I imagine the experience is pretty similar.

I added a bunch of Terraform to the repository to create the necessary deployment target - an S3 bucket - and a set of IAM credentials with access limited to that S3 bucket for the GitLab CI/CD pipeline to use to copy the static assets.

I ran into a few problems:

Something cool I learned was how to expose the S3 bucket publicly as a static website without setting an ACL of public-read. Rather than do that, it’s better to set up a more restrictive, but still publicly visible bucket policy:

    "Version": "2012-10-17",
    "Statement": [
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*" 

This is actually what sent me into a panic. I had to manually edit my account-wide bucket permissions settings to temporarily allow the bucket to get created with a public policy. Maybe some added ansible in here would have allowed me to turn the setting on and off again without manually intervening.

© 2020