DEV Community

Sarah Harrington
Sarah Harrington

Posted on • Updated on

Canvas Playground, deployment woes

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. After installing the AWS CLI you can configure 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. 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.

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

Route53

I use Route53 for DNS on my portfolio 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

I looked in the console and see 400 errors

Image description

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.

Top comments (0)