Deploying angular app to AWS Elastic beanstalk

问题:

I’m trying to deploy a very basic angular app to elastic beanstalk. The project was created using the angular cli. I have not made any changes to the files in this project.

Here are the steps I took to deploy the app

1. Executed ’ng build’ inside the root folder of my project
2. Moved the @angular/cli dependency from devDependencies to dependencies in package.json
3. Zipped the contents of the dist folder along with package.json
4. Deployed zip folder to AWS EB configured with the node.js platform, node version 8.11.3, the same as my local environment.

I always end up with a ‘npm install failed’ error when I check eb-activity.log.

Am I missing something trivial here? Would really appreciate any help with deploying angular apps to EB.

回答1:

While this does not specifically answer your question, I don't think Elastic Beanstalk is the right tool for the job. I strongly suggest hosting on a Static Website on S3, and if you want https and a custom domain name, put a CloudFront distribution in front of it.

1. Create an S3 bucket, e.g. www.mydomainname.com

2. Enable Static Website Hosting

3. Set the Bucket Policy to public read

   {
       "Version": "2008-10-17",
       "Statement": [
           {
               "Sid": "PublicReadForGetBucketObjects",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::www.mydomainname.com/*"
           }
       ]
   }
   

4. Build the angular app locally, into a dist folder.

5. Push the files to the website using the aws-cli

   aws s3 sync dist s3://www.mydomainname.com/

This solution will cost pennies, much lower than an Elastic Beanstalk solution (EC2, EBS, ELBs). Elastic Beanstalk is great for Monolithic apps, but their existence is numbered, and the wrong paradigm when you are talking SPA, IMO.

I know I'm pushing my luck now, but I would also strongly recommend using the Serverless Framework to build and deploy NodeJS API endpoints for your Angular App to interact with.

回答2:

Got the deployment issue resolved! I used express to create a server and serve my angular app. I needed to add server.js to my dist/ folder. My server.js file looked like so

const express = require('express');
const http = require('http');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname));

const server = http.createServer(app);

server.listen(port, ()=> console.log("Running..."));