Canvas Playground, deployment woes
Tags: socketio, aws
Published: 2023-09-15 14:47:47

When I was looking up info on how to deploy my socket.io server to AWS I ran across a post about using API Gateway sockets which was released back in 2018 after I initially created my project. About 30 tabs later and a mushy brain I got back to my original plan of using EC2, S3 and CloudFront (which also lead to a very mushy brain, more to come on that).

### Setting up AWS CLI
I recently switched over to a new Macbook and decided to set up a fresh dev environment which meant I needed to set up the AWS CLI again. I installed the AWS CLI using [Homebrew](https://formulae.brew.sh/formula/awscli). After installing the AWS CLI you can [configure](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) your settings for your needs.

### EC2
I started out with creating a Debian Linux server on EC2 that I logged in to using SSH. I am very fortunate that my partner is a Dev Ops Engineer and walked me through setting up a [SSH Alias](https://wiki.debian.org/SshAliases). Does it get any better than having a literal in house expert?

Once I was in, I was able to install Node and upload the server for my project. To get things up and running I'm using `scp` to upload my files with a goal to make a more automated process once I've got things working.

### S3
I created a bucket for my project and synced the files using the [AWS CLI S3 sync command](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/s3/sync.html).

### CloudFront
I created a new CloudFront distribution for this project that has two origins, one pointed at the EC2 instance for my backend and one pointed at the S3 bucket for my project. I set up a behavior for the EC2 instance for the path pattern `/socket.io/` since that is amended to all of the outgoing requests from the socket.io client side code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xar4huomlxcyxju33so.png)

### Route53
I use Route53 for DNS on my [portfolio](https://sarahdoes.tech) site. I created an A record for canvasplayground.sarahdoes.tech so the site could have it's own unique URL.

I pulled up the site and was super excited until I noticed that it didn't show any connected users.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmvq9jikmll1eum5ul6o.png)

I looked in the console and see 400 errors

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93kads8oklvjipmsx86d.png)

After consulting with the in-house expert and Google, I have not been able to find a solution for the 400 from the server. CloudFront is acting as a reverse proxy and there are some specific callouts for using Socket.io with reverse proxies in the Socket.io documentation but nothing specific to CloudFront. I ran across some other inquiries from others on how to make this work but no solutions.

I'm exploring what other options I have for getting this project up and running.

- API Gateway sockets
- Using standard websockets since they should be compatible with CloudFront
- Sticking with socket.io and hosting the front end on my EC2 instance

I was looking forward to being able to using socket.io to implement some features I think could be fun so I'm debating the decision to keep going with that against switching to a different websocket strategy.