Here is my reference readme for it… Its very shorthand, but should hint you in the right direction.
I usually spend about 20min to get a site up which sucks. Recently update to react 16 and meteor 1.6 caused my Less styles not to compile on deployment, which is genuinely annoying!!
Thus this post, and thus me searching for easier methods. Also think
meteor-deploy-s3 is not actively maintained.
I just tried https://medium.com/@purplecones/deploying-a-meteor-app-for-free-using-zeit-now-c183329057c9 - and its great and no problems this far. Custom domain also easy.
However, after a while Zeit freezes the instance which means it can take a while to come alive unless you dedicate an instance (by
now scale <url> 1 ), which is not that bad since the premium package is cheap. Zeit is impressive though! Not sure if I made a mistake when checking, but with meteor-now the browser loads 500kb, compared to 1.3Mb on the S3 deployment - why?
Here the readme.
S3 Setup Instructions
Deploy a new React Meteor App to S3 by following these steps:
Create deploy.json in project root
- Create a new S3 bucket with
www.mysite.com name, set the permissions to be visible to public and region to US (Virginia) - us-east-1, make it a Static website hosting bucket and set Index document:
index.html - same as main meteor html file.
- Go to AWS IAM and under policies, edit
- Install https://www.npmjs.com/package/meteor-deploy-s3.
- Deploy using
npm run production-deploy.
- Your app is now live under the bucket url.
configure an ssl (https://www.h3xed.com/web-development/using-https-with-amazon-s3-and-your-domain )
AWS Cloudfront Setup
- Go to AWS CF and create a new distribution, set the follow (This takes a few minutes to deploy):
- Origin Domain Name: www.mysite.com => S3 bucket
- Viewer Protocol Policy: HTTP redirect to HTTPS
- Alternate Domain Names (CNAMEs): www.mysite.com
- Default Root Object: index.html
- SSL Certificate: Custom SSL Certificate => *.mysite.com
- Restrict Bucket Access: Yes
- Origin Access Identity: Create a New Identity => access-identity-www.mysite.com.s3.amazonaws.com
- Grant Read Permissions on Bucket: Yes, Update Bucket Policy
- Copy the CF domain name give by AWS.
AWS Route 53 Setup
- Go the AWS Route 53, edit the www.mysite.com domain.
- Add a CNAME record with name www.mysite.com and value = the CF domain name. Set TTL to 60.
React Router and Cloudfront
In order to redirect the routes of react router to the app route, we need to specify an error page redirect in CF. When configuring the CF distribution, go to the error pages tab and create the following:
- HTTP Error Code: 403
- Customize Error Response: Yes
- Response Page Path: /index.html
- HTTP Response Code: 200
You can also do the same for undefined routes 404, and setup react router to catch these unmatched routes.
CF takes a few minutes to propagate changes to all regions / edges of the CDN. When not checking if updates is valid, website hosting on the bucket should be disabled in S3 to force all access though SSL on CF.
If changes are made which must propagate immediately, an invalidation request can be created on CF distribution to update all file cache in cloud. Go to the CF distribution configuration and select the invalidations tab, and create a invalidation.