We have an app written in Angular
We will use an nginx container to host the angular
but the problem is where we have to perform the npm install for creating the /dist folder in angular.
Do we have to perform it in the dockerfile of our nginx-webserver or is this against the rules?
You are obviously using node as your dev server and want to use NGINX as your prod server? We have a similar setup
this is how we do it ...
in our dev environment, we have /dist on .gitignore
on a push to git we have a Jenkins job that does a build (this does the npm install inside a Jenkins build server)
on a successful Jenkins job we do a docker build (a downstream job), the docker build copies the /dist files into the docker image
we then do a docker push
the resulting docker image can be pulled from any server - hope that helps
would welcome your thoughts :)
PS The problem with doing the npm install during the docker build is that your docker container becomes messy. You end up installing loads of software inside it just for setup purposes.
All you really want in your docker image is NGINX serving up your build files.
This is why we do not do an npm install during the docker build.
Related
I am building a react app using cra, so the problem is the application just has the client side code which means there is no nodejs part.
I have two different environments one is development and one is production, as cra tells there is a order of preference:
.env
.env.development
.env.production
So if .env.production file is there in repo it will take that one and use that config based on the script that I give, if I use npm run build it will use .env.production and if I use npm start it will use .env.development if the file is there.
So I can add .env, .env.development, .env.production, but when I build the image in the Docker I can give only one command either it should be npm start or npm run build. So how should I solve this?
Install a local development environment; typically your only host dependency will be Node itself. Use the .env.development file there, via something like the Webpack dev server, with a command like yarn start.
Use Docker principally as a deployment mechanism. Your Dockerfile can build your application using the .env.production file, and then copy it into something like an Nginx container that doesn't need Node at all. It should follow the pattern in the CRA Creating a Production Build docs. Loosely,
FROM node:lts AS build
WORKDIR /app
COPY package.json package.lock .
RUN npm install
COPY . .
ENV NODE_ENV=production
RUN npm run build
FROM nginx
COPY --from=build /app/build /usr/share/nginx/html
# Base image provides default EXPOSE, CMD
This pattern gets around all of the difficulties of trying to make Docker act like a local development environment (filesystem permissions, node_modules not updating, live reloading being flaky, ...) by just using an actual local development environment; but at deployment time you get the benefits of a self-contained Docker image with no host dependencies.
Without using NodeJs to serve the static file, I am trying to build Docker image for create react app with the below folder structure
sampleapp -
client
src
...
DockerFile
So client is build by create-react-app client, the application is just consuming services and rendering it.
Dockerfile:
FROM node:10.15.1-alpine
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
EXPOSE 4000
CMD ["npm", "start"]
How can I start the Docker container in local and prod, and is the above Docker script is fine for running the application in production build?
If you're asking how to run an image, you simply do docker build -t client ., and then docker run client. Your Dockerfile is not fine for a prod environment because it runs as root. You should add the following lines just before the last line.
RUN adduser -D user
USER user
Once you've run npm run build you will have a set of static files you can serve. Anything that serves static files will work fine. One typical setup is to use a multi-stage build to first build the application, then serve it out of an Nginx image:
FROM node:10.15.1-alpine AS build
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
FROM nginx:1.17
COPY --from=build /var/panda/client/build /usr/share/nginx/html
For day-to-day development, just use the ordinary CRA tools like npm run start directly on your desktop system. You'll get features like live reloading, and you won't have to mess with Docker volumes or permissions. Since the application ultimately runs in the browser it can't participate in things like Docker networking; except for pre-deployment testing there's not really any advantage to running it in Docker.
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.
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'));
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.
I am new in react, and now I have an available project which is needed some kind of development. The whole project consists of app and build folder and both of them also have index.html file and some other staff. How can I launch this project for viewing its demo in linux?could anyone explain the process step by step?
thanks in advance
Approach 1: Via Node
Install Node Install Node on linux machine
Once successfully installed, go to project folder and run npm install to install dependencies.
Run command "npm start" or in background "nohup npm start &" will start default application on 3000 port, from browser check http://IP/domain name:3000
Approach 2 Via Yarn
Install Yarn on linux machine Install Yarn
from project folder run yarn install will install all dependencies.
run yarn build will create complied code in /build folder
Install apache or Ngnix and move build folder content to apache or ngnix web root folder
Access app from http://IP or domain name if seted up for ip.
I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing