I want to deploy a simple angular projet made with angular fullstack.
https://github.com/DaftMonk/generator-angular-fullstack
I tried :
yo angular-fullstack test
grunt build
Then, in dist I got 2 folders: server and public.
how to deploy them on a linux server ?
with forever/node and nginx ???
I want to self host my project.
thanks
1.) Install nginx
2.) Proxy forward nginx to your node port. See Digital Oceans How-To.
nginx.conf
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:9000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
3.) Start app.js with node in your dist folder with the correct variables:
$ export NODE_ENV=production; export PORT=9000; node dist/server/app.js
4.) Browse to the hostname configured in nginx in step 2.
In case you get many 404's you most likely are using angular.js in HTML5 mode and need to re-wire your routes to serve static angular.js content. I described this and how-to tackle many other bugs that you may face in my blog article: "Continous Integration with Angular Fullstack".
You can try pm2 as well which is straightforward and easy, it comes with lots of useful features.
https://github.com/Unitech/pm2
// Start new node process
$ pm2 start dist/server/app.js
// list all process
$ pm2 list
Also, if you're running a mongo db with a host you will need to change the /server/config/environment/production.js uri to match development.js and it should work.
With MongoLab you have something to this effect:
mongodb://user:pass#XXXXX.mongolab.com:XXXXX/yourdatabase
then run the grunt serve:dist command in your app directory.
This worked for me.
Install generator-angular-fullstack:
npm install -g generator-angular-fullstack
Make a new directory, and cd into it:
mkdir my-new-project && cd $_
Run yo angular-fullstack, optionally passing an app name:
yo angular-fullstack [app-name]
Run grunt for building, gruntserve for preview, andgrunt serve:dist` for a preview of the built app
Related
I have an Amazon EC2 instance already running my Docker container containing my MongoDB and Apache Maven backend code. The Docker container is successfully running on port 80, and queries to it are working. I'm trying to set up Nginx as well to load my React generated index.html from "npm run build". However, Nginx cannot start itself because it can't bind to port 80 as expected. I've tried to proxy by setting
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000;
but it doesn't seem to quite do the trick. Do I need to stop Docker, and re-run it with a different syntax? I've seen 8080:80 on some other online resources instead of 80:80. Is there anything I should fix with my Nginx config file?
Also, when I make calls to the backend via Axios in React, should I set the base URL to be 0.0.0.0:<SERVER_PORT>, or should I set it to something like <PUBLIC_EC2_INSTANCE_URL>:<SERVER_PORT>, or something else entirely?
Any help or advice is appreciated; thanks for your time!
How does the nextjs handle SEO? I am trying to render page by invoking it directly (localhost:8080/about) from the browser, but NGINX is returning 404. The link to same page embedded in the home page is working but the page can not be loaded directly using URL. Are additional configurations needed either in NGINX or Nextjs app.
Since you're using NGINX as your web server, you may want to reverse proxy to your NextJS app. https://medium.com/#deresegetachew/serving-react-spa-using-nginx-and-reverse-proxy-4e5485c814a0
React/NextJS uses port 3000 by default. Your URL in your post is pointing to port 8080. NGINX is not used by NextJS by default, so I believe a different web server is rendering your page, i.e. NGINX.
When you run the following commands on your nextjs project, you'll see the following output and it'll say what port is being served. Then try viewing that with your web browser.
$ npm install
$ npm run dev
...
[ wait ] compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
If your have a server.js in your projects top directory, or you can add one to configure which port your app will serve. https://nextjs.org/docs/old#custom-server-and-routing
If your web server has a firewall enabled, not all ports will be available.
NextJS serves the site itself and doesn't use nginx or Apache.
In your package.json file, you should have a next command in the scripts section. I normally have:
"scripts": {
"build": "next build",
"dev": "next"
}
Running yarn dev or npm run dev will bootstrap the site and allow you to connect to the site locally and see how it handles 404s and other errors.
When you deploy your site, it will be using this kind of server set-up rather than either of the servers mentioned above.
I hope that's helpful.
Could you share some configuration code?
Out of the box nextjs should display the default export react component that lives under pages/about.js or pages/about/index.js /about when hitting https://localhost:8080/about.
Next.Js has it's on server so you don't have to use another one.
Just run the command npm run dev after installing the next.js using the command prompt for running locally in you machine.
maybe you run application on port 3000 and when you want to serve on another port for example 80 or 8080, you need redirect Nginx requests to port 3000 in this way that you make redirection in Nginx's config file :
(replace server-ip with your server ip or localhost or 127.0.0.1)
location / {
proxy_pass http://<server-ip>:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
although you can run PM2 for manage and run your application on the server easily
as I saw your nginx serve nothing on 8080 port, that's why you didn't reach to your application on http://localhost:8000, so you can test with http://localhost:3000 because default port is 3000
that's all it.
Anyone please explain it.
I'm struggling with this.I followed this blogpost https://www.davidmeents.com/blog/how-to-simply-deploy-a-react-app-on-digital-ocean/
But all i got default page of nginx or now after some messing around with configuration i'm getting 404 not found error.
There are two floders inside nginx 1) sites-availble 2)sites-enabled
I'm not sure which one is relevant here.
my config is like this
server {
listen 80;
server_name 139.59.25.228;
root /www/mywebsite/app/build;
rewrite ^/(.*)/$ $1 permanent;
location / {
try_files $uri index.html;
}
}
Thanks -:)
It's not so complicated, you just need to:
1/ Start your react application as usual, maybe npm start, then maybe it will open port 3000 for you (or any number)
2/ Config nginx for port 80 pointing to that localhost:3000 (or your defined port):
server {
listen 80 default_server;
server_name YOURDOMAIN.HERE;
location / {
#auth_basic "Restricted Content";
#auth_basic_user_file /home/your/basic/auth/passwd_file;
proxy_pass http://localhost:3000; #or any port number here
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
However, in order to keep the npm start - your localhost with port 3000 server always alive, I suggest you use pm2:
sudo npm install pm2 -g
Then, change directory (cd) to your reactjs app folder: (I assume you use npm start for starting you reactjs app)
pm2 start npm -- start
(if you use kind of npm run:start to start app, then it should be: pm2 start npm -- run:start)
After that, this command will be remembered by pm2!
Useful pm2 commands:
pm2 list all
pm2 stop all
pm2 start all
pm2 delete 0
(use delete 0 to delete the first command from pm2 list with ID 0)
We have an front-end application.
It's written in Angular (html + css + javascript) which needs to be hosted by a webserver (nginx).
Angular is communicating with a NodeJs server which will communicate with the backend.
Now we have to run this in Docker.
We want to use 2 Docker containers: one with nodejs and one with nginx and let them work together
So is it possible to write 2 dockerfiles in the one repository?
The main idea is to have 1 dockerfile for nodejs which is also running the bower install, npm install, ...
which will look like this:
# Create app directory
RUN mkdir -p /usr/src/www
WORKDIR /usr/src/www
RUN npm install -g bower
RUN npm install -g gulp
# Install app dependencies
COPY . /usr/src/www/
RUN bower install
RUN npm install
RUN gulp build
EXPOSE port
CMD [ "node", "server.js" ]
And one dockerfile in which we run a nginx-webserver but will also include a nginx.conf so it can point to the right /dist folder in our node.js-container
The dockerfile of nginx will look like this:
# Set nginx base image
FROM nginx
# Copy custom configuration file from the current directory
COPY nginx.conf /etc/nginx/nginx.conf
An example of the nginx.conf
location ~* /dist {
proxy_pass http://nodejs:port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
Using 2 docker containers is the best option in my opinion, single responsibility per container design is worth to follow.
It's very common having to create more than one container per project:
database
backend server
frontend server
One approach is create a folder for docker definitions and for each docker context, create an script docker_build.sh that prepares the docker context (copy all the artifacts required: libs, source code, etc) and finally make the docker build.
project_root/
|----src/
|----docker/
|----|----angular/
|----|----|-----Dockerfile
|----|----|-----docker_build.sh
|----|----nodejs/
|----|----|-----Dockerfile
|----|----|-----docker_build.sh
An example of docker_build.sh
#!/bin/bash
# create temp directory for building
mkdir DockerBuildTempPath/
# copy files to temp directory
cp -arv Dockerfile DockerBuildTempPath/
cp -arv ../../src/ DockerBuildTempPath/
# ... etc
cd DockerBuildTempPath
#build image
docker build -t myapp .
# remove temp directory
cd ..
rm -r ./DockerBuildTempPath/
Try jwilder/nginx-proxy(https://github.com/jwilder/nginx-proxy). I'm currently using it to host a main docker Nginx that proxys for all my other docker services.
I am using Ionic framework for one application. The code is on a linux server. I am running the application using ionic serve command through putty.
But, the problem is if I close the putty the application is stopped. Is there any way to run the ionic serve permanently as a daemon process?
I'm suspecting you're trying to do this because you want to serve your Ionic app as a web app, correct?
In that case - you don't have to run ionic serve permanently. All you have to do is take all the code from the www folder and place it in the http folder (or any other which is valid for your system) of your web server.
So, basically, spin up apache (or nginx) and serve the code from the Ionic's www folder. Basically, ionic serve command does the same thing - it spins up a local web server and serves the content from the www folder. It does that for faster local testing.
You can take a look at this SO question for more info on how to deploy Ionic as a website.
I wanted to test on my server using Ionic and Capacitor but the www folder wasn't running the third party apps.
Although not tested, technically the setup should be able to work for Ionic with the other frameworks e.g Vue, React, etc.
Using nginx and supervisor I got it to work.
Nginx config
sudo apt-get install nginx
sudo apt-get install nano
Create a conf file
sudo nano /etc/nginx/sites-available/ionic
Add the following inside the file.
server {
listen 8100;
server_name your-domain.com your-ip-address;
charset utf-8;
client_max_body_size 10M;
#Django media and static files
location / {
proxy_pass http://127.0.0.1:8101;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Note, I'm listening on port 8100 but you could use any other port e.g. 80. Also, proxy_pass is set to 8101 as ionic will be running on this port. See below under the Supervisor config
Supervisor config
sudo apt-get install supervisor
Then create a conf file
sudo nano /etc/supervisor/conf.d/ionic.conf
Add the following inside
[program:ionic]
command=ionic serve --port=8101
directory=/path/to/your/ionic/folder
autostart=true
autorestart=true
startretries=3
stderr_logfile=/var/log/supervisor/ionic/error.log
stdout_logfile=/var/log/supervisor/ionic/out.log
As described earlier in the Nginx config, I'm serving ionic on port 8101.
Note: not get an error, create the ionic folder in the logs
sudo mkdir /var/log/supervisor/ionic
Then enable and restart the services
sudo ln -s /etc/nginx/sites-available/ionic /etc/nginx/sites-enabled
sudo systemctl restart nginx
sudo systemctl restart supervisor
sudo supervisord
Before opening your website, check that ionic is running on correct port in the log output file
tail -80 /var/log/supervisor/ionic/out.log
sudo systemctl enable supervisor
sudo systemctl enable nginx
http://your-domain.com:8100 or http://your-ip-address:8100