I recommend running a serverless stack so you can avoid getting hung up on infrastructure shenanigans. It's super cheap too. React SPA via CreateReactApp using cloudfront+s3 to host the HTML+css+js and API gateway ->lambda backend -> w/dynamodb to store your data and you can get something cool and useable going. In that stack you can mix and match other UI tiers, swapping vue, angular or polymer in for react.
I recently completed a proof of concept with both polymer and react on the above stacks, probably going to do angular next. There were some annoying things in the area of error reporting being unclear from AWS' stack, but once I figured out that CORs warnings from the UI tiers accessing the API gateway usually mean a self inflicted typo in my url it was pretty smooth sailing.
The setup was pretty straightforward with tutorials galore and it's rediculous cheap, the most expensive part is the route53 stuff as it costs a buck a month or something like that to route a ___domain. Well, I bought a few domains too so those are like 15 bucks a year (I got them from a random registrar, not aws).
Don't get me wrong though, it won't be a path of roses, aws error messages sometimes make no sense whatsoever and require some googling to figure out, typos are NOT your friend!
Luckily Google usually led me to someone trying to set something up similar and I could logic it out from there. My #1 thing that I wish someone had told me was that if you make a Ajax call to your web API and the browser spits out a CORS error, check, triple check the url and what kind of call you are making (POST, GET, etc) because at least on my setup mistakes in those actually shows up as a CORS error instead of your typical 404 error.
I also bit the bullet and figured out how to use one of the serverless sites to deploy the AWS API+lambda+dynamodb one one fell swoop using a .yml file. But first I did it all by hand via the AWS gui so I could get some idea of how it worked. That .yml file is a whole other rabbit hole as the error messages are pretty obtuse at times.
Edit: One thing to watch for on cost is the dynamodb, by default they reserve 25 total transactions per second on the free tier. If you try to increase the performance by reserving much a whole lot more, like 1000 tps per table/index, that will get pricey right quick. So either leave it at 25 and recognize that if you add an index things might get throttled while it builds the index, or do what I did, which is I went ahead and switched it to the pay as you go model since $0.20 per million transactions is plenty cheap and I'm not even flirting with that 20 cents on my proof of concepts that span 5 different web domains.
Wow, that is everything I asked for and more; thanks a lot for taking the time and effort to summarize all this. Now I feel like I can get started with this tomorrow.
Couple remarks:
> CORS
Oh, that may save me lots of time... Seems related to http headers at first Googlance? These bit me in the past (in middleware and backend apps) and I still don't have a solid grasp of when I should use which.
> dynamodb
I'll probably do the same as you then.
I've got hobbyist hardware at home (behind 1G fiber) so I usually use that as a lab — I still have to make a 'serverless' platform though — so anything too expensive I can balance back 'on-prem'.
I need to learn AWS anyway (who doesn't, I figure, if you intend to CI/CD as small/one-man team). Glad I can go the serverless path to get my feet wet!
For the first year, you get one million requests per month for free. After that, it’s $0.20 per million requests. There’s also a component based on time & memory usage, but it appears to be small, too.
I recently completed a proof of concept with both polymer and react on the above stacks, probably going to do angular next. There were some annoying things in the area of error reporting being unclear from AWS' stack, but once I figured out that CORs warnings from the UI tiers accessing the API gateway usually mean a self inflicted typo in my url it was pretty smooth sailing.