Host an Angular App, ExpressJS endpoint on a AWS EC2 server - angularjs

Question

First of all, I would inform the readers that I am pretty new in NodeJS, Angular and Express.
I have partially completed a project, where I am needed to create a Website in AngularJS with a server side logic(ExpressJS).
But while developing I realised that hosting or deploying a MEAN stack isn't as straightforward like LAMP stack.
So i request a solution to the following problem,
I want to host a website developed in Angular with the endpoint in ExpressJS and database in MySQL.
I have tried to find solutions to this. But none of them painted a clear picture in front of me.
Sadly, the server i have is a free tier due to budget constraints and its a plain simple Ubuntu 18.04 System.
Here is one link that i tried to understand but is for azure.
This one was kind of more helpful but again it raised many questions.
Since I am new to this technology I would be grateful if somebody would help me through the deployment process of Angular and Express together on the same server.

Answer 1

I would go with Docker. One container running a node image and another container running mysql image. The node container will run your angular and express app. Also with Docker you will have no difference between your developing environment and your production environment.
Do you have Docker installed? Which OS are you using?
Download node image from Docker Hub:
docker pull node
Then i would create a Dockerfile to generate an image from node image while copying all your source code on it.
FROM node:latest
LABEL author="Your Name"
ENV NODE_ENV=production PORT=3000
COPY . /app
WORKDIR /app
RUN npm install
EXPOSE $PORT
ENTRYPOINT ["npm", "start"]
The COPY command will copy the source code of your current directory (.) to the app directory inside the container. WORKDIR will set the context where your commands will be executed inside the container so you can run npm install where your package.json is. RUN will download all app dependencies inside the container. ENTRYPOINT will execute the file that will start your app as specified in your package.json file, like below:
"name": "app",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"license": "ISC",
"dependencies": { ... }
.dockerignore file (so you do not copy your node modules, Dockerfile, etc inside your container):
node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
README.md
LICENSE
.vscode
To create an image based on the above Dockerfile (you need to place Dockerfile and run docker build in the same folder of your app container):
docker build -t image_name .
To run your image in a Docker container:
docker run -d -p 3000:3000 image_name
Running the container like this you can open your app in the browser with your DOCKER_HOST_IP:PORT and it will run your app.
Assuming you are running your app in PORT 3000, we are mapping external 3000 port to the internal port 3000 inside the container where your app is running.
EXPRESS
In order for express to serve your files, you need to set express.static:
// serve client side code.
app.use('/', express.static('app_folder'));

Answer 2

You can git clone your app on EC2 instance and then install a systemd service, here's an example of a service file:
[Unit]
Description=My App
After=syslog.target network.target
[Service]
Environment=NODE_ENV=production
ExecStart=/usr/bin/node /home/appuser/repo-app/index.js
WorkingDirectory=/home/appuser/repo-app/
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=myapp
User=appuser
Group=appuser
[Install]
WantedBy=multi-user.target
You can also make a good use of a haproxy in front of your express endpoint.