Search code examples
amazon-ec2amazon-elastic-beanstalkangular5

Angular 5 Create an Application Source Bundle for AWS EC2

In AWS Elastic Beanstalk, there is a wizard flow for deploying node.js apps. When I get to the step for "upload your own" application source, it describes in generic terms their 3 requirements: zip file, less that 500MG, no parent folder. But they stop there. No specifics. I dropped out to bash and ran...

ng build --prod

...and now have a dist folder. So... what do I include in my zip file and at what folder level? I have tried just /dist, and also /myapp/dist which included all the other loose files in /myapp but no other sub folders such as /src. I have looked all over the web, but don't see what should be a fairly simple tutorial on zipping up an Application Source Bundle for AWS EC2.

What should be included in the zip file for upload?

Solution

  • The cardinal sin in my question above was attempting to run my Angular 5 app in AWS by using their choice for node.js as my server platform. Here is what I learned (with some help from folks like Albert Haff: Angular 5 uses Node (ng serve) to simulate a webserver while you code. However, even though there is a supported flag for --prod, it's not to be used in production! It's really easy (and tempting) to select node.js as the environment when deploying your Angular 5 app via Beanstalk -- but don't do it!

    1. from within your Angular 5 project folder, run ng build --prod ( and consider adding --aot)
    2. if you can, from within the new /dist folder that the build just created (or updated), optionally run compression like for i in dist/*; do brotli $i; done
    3. from within the /dist folder, zip up ALL the contents including subfolders.
    4. go to beanstalk, and as you create a webserver environment, select Tomcat (or any other plain old webserver, but DON'T pick node.js even though it's on the list!).
    5. on Application Code, select to Upload Your Own, and browse to the .zip file you created in step 3 above.
    6. click Create Environment and in a few minutes your Angular 5 app will be serving up on the internet.

    Now, from here you will likely need to connect up your domain name. Use Route 53 for that.