Angular 2 app deploy in a docker Container running on AWS

Question

Hello Fellow Programmer,

For a project we created an Angular 2, which will be our GUI. This GUI will get his Data from a Backend-API hosted at Amazon Web Services (AWS)‎.

The GUI should run also on AWS, we thougt about running it as an Docker container on an EC2.

The GUI works fine on my PC but im not able to make a prober Docker container, which work neither on my pc or on AWS.

Do you guys know a good Tutorial / Hello World Project where i can learn how to create an Angular 2 app in Docker?

Some more information how im trying to do this:

my Dockerfile

 # Create image based off of the official Node 6 image
 FROM node:6

 # Create a directory where our app will be placed
 RUN mkdir -p /usr/src/app

 # Change directory so that our commands run inside this new dir
 WORKDIR /usr/src/app

 # Copy dependency definitions
 COPY package.json /usr/src/app

 # Install dependecies
 RUN npm install

 # Get all the code needed to run the app
 COPY . /usr/src/app

 # Expose the port the app runs in
 EXPOSE 4200

 # Serve the app
 CMD ["npm", "start"]

change the package.json

  {
    ...
    "scripts": {
       "start": "ng serve -H 0.0.0.0",
       ...
     },
    ...
  }

run docker build -t gui:test .

run docker run --name gui -p 4200:4200 gui:test

if i did it correctly localhost:4200 should show me my running Angluar 2 app, which he does not.

Edit: The ip given from the demon with the Port doesnt work aswell 192.168.99.100:4200

I would provide a build run for the docker imageng build --production and serve this using a webserver like nginx or apache. This prevents to provide the entire typescript code in the docker image — Bernie
– Bernie, Commented Apr 26, 2017 at 9:27
@Bernhard so i get my distdirectory and copy it to nginx nginx/html/ and build an nginx docker container, am i right? — sHamann
– sHamann, Commented Apr 26, 2017 at 12:28
@sHamann Yes exactly. And what taskiner said is a good point as well to put is on S3 or better on a CDN (Cloudfront) if you'll have a lot of traffic on the app. — Bernie
– Bernie, Commented Apr 26, 2017 at 12:30
@Bernhard its working know, you might give a short answer to this question so i can give you an upvote and mark you as solution? — sHamann
– sHamann, Commented Apr 26, 2017 at 15:13

Bernie · Accepted Answer · 2020-01-12 08:58:12Z

It's more practical to create a build of your project rather than use the entire angular-cli functionality to serve the client from a perspective of bandwidth, separation of concerns and obfuscation.

Why:

ng serveis more for a development context preventing to focus setting up a webserver, backend proxy and so on during development. But beside that functionality angular-cliprovides simple build tools as well.

Create a build:

ng build --prod collects all the dependencies and creates a dist folder which contains the entire app.

The content of this folder can be copied/deployed on a web server like Apache, nginx or IIS

Sidenote:

When your app is not running on your domain root e.g. www.my.domain.com/subfolder it's also important, to specify the base href attribute for the build. e.g.:

ng build --prod --base-href /subfolder/

Then your app will run properly on www.my.domain.com/subfolder/ and all assets like images and so on gets loaded.

Collectives™ on Stack Overflow

Angular 2 app deploy in a docker Container running on AWS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related