I have an App composed of three projects with the following structure :
mainapp
->/packages
->/admindashboard
->/shopapp
->/api
I want to deploy the project on an Ec2 instance (which I'm not the administrator), so I built the admindashboard and the shopapp with :
yarn build
added Nginx and configured the /nginx/sites-available/default file like so :
server {
listen 80 default_server;
server_name localhost;
location / {
root /var/www/mainapp/packages/shopapp/out;
index index.html index.htm;
}
}
#running admin-Dashboard
server {
listen 3000 default_server;
server_name localhost;
location / {
root /var/www/mainapp/packages/admindashboard/build;
index index.html index.htm;
}
}
-this got the tow front apps to work, but I couldn't link the api.
when I run yarn dev:api-shop or yarn dev:api-admin
it shows that it's running on port 4000 but the front app's fail to fetch the data, it can't get or post to the api.
what is the correct way to deploy such project?
the project technologies are :
Admin Dashboard :
-CRA
-Apollo
-BaseUI
-Typescript
-React Hook Form
Shop :
-NextJs
-Apollo
-Typescript
-Styled Components
-Stripe Integration
-Formik
API :
-Type GraphQL
-Type ORM
thank you, and sorry if my explanation is not clear.
I resolved the problem, actually in the admin project in the .env file the API URL was :
http://localhost:4000/admin/graphql
I had to change localhost to the Ip address of the instance like so :
(example)
http://15.xxx.xx.xxx:4000/admin/graphql
and it worked, yet having two API (one for the shop and one for the adminDashboard)
I had to run one on the 4000 port and the other one on the 4001, Now it works but I still wonder if it's the proper way to deploy such app . thank you all
Related
I currently have a VueJS application that has 2 parts. One being a static front end page and the other as a NodeJS express backend.
In the backend server, it will load the static(dist) folder as the front end view. The backend also contains some MongoDB api's to load and save some configuration.
I am currently trying to separate the two as each own docker container. I've managed to make the backend running but I am currently having some issues on running the front end. I'm having issues with configuring the nginx that will allow me to upload files to the server.
Here is my current nginx config
server{
listen 80;
root /var/www/html;
index index.html;
location /models/ {
root /app/upload;
}
location / {
try_files $uri $uri/ /index.html;
}
}
So in the frontend, it will create a post request to the backend to upload some models but it seems that it is throwing: 405 (Not Allowed) error.
Is the issue because there is something wrong with the configuration or it cannot connect to the backend as it is in a separate container?
Any help/opinions with this is greatly appreciated. Thank you
Simple / Easier / Faster are slogans i read every where they wrote about Passenger.
But it's really complicated to deploy.
Early 2019 i deployed 1st time, it took about a week for searching how to config
And now, 2nd deployment, 3 days already and got no luck, post that helped me config last time has gone.
Official Tutorials are so general and helps just a little and only in easy cases. Most of online tutorials are about PM2,... a few wrote about Passenger but not much to see.
I have Frontend & Backend placed in same root folder with structure like this:
Root app folder
|___client (Frontend - React)
|.......|___node_modles
|.......|___public
|.......|.......|___index.html
|.......|.......|___favicon.ico
|.......|___src
|.......|.....|___index.js
|.......|.....|___App.js
|.......|.....|___actions
|.......|.....|___components
|
| (Backend - nodeJS using express)
|___node_modules
|___middleware
|___models
|___routes
|___server.js
I'm using Nginx + Passenger + nodeJS
Config for Backend:
server {
listen 8080;
server_name x.x.x.x www.x.x.x.x;
root /var/www/tnapp/code/public;
passenger_app_root /var/www/tnapp/code;
passenger_app_type node;
passenger_startup_file server.js;
passenger_enabled on;
}
The server doesn't response and just got err
This site can’t be reached<br/> x.x.x.x took too long to respond..
Frontend config:
server {
listen 80;
server_name x.x.x.x www.x.x.x.x;
root /var/www/tnapp/code/client/public;
passenger_app_root /var/www/tnapp/code/client/src;
passenger_app_type node;
passenger_startup_file server.js;
passenger_enabled on;
}
With this frontend i got response html part, but nodjs part seems not working.
Hope someone can help me out on config this thing
i'm exhausted ##
I have my business app running in Development env and inside that, 2 folders named Client and Backend.
Client (ReactJS) running in port 5000
Backend (Node.JS) running in Port 6000
Server Nginx.
So in Nginx default.conf file, listening 80 and I've proxy_pass http://localhost:5000.
Its working fine in the Development.
Please note, some redirections are configured like ${host}:3000/xxx in the backend and client scripts
But while doing the production deployment, I found difficulty in doing so.
I have the static build client file and placed it in the nginx root folder.
Below is the .conf file
server {
listen 80;
listen 5000;
server_name xx.xxx.xxx.xxx;
location / {
root /usr/share/nginx/html/client/build;
index index.html index.htm;
try_files $uri $uri/ #backend;
}
location ~ ^/([A-Za-z0-9]+) {
proxy_pass http://localhost:6000;
}
}
I Also have SSO enabled, when I navigate the address, it send the index.html file which is the login page.
When I press login, first it will navigate to "/login/abc/" which is routed in "backend" script.
But it responds with 404 error.
What am I doing wrong?
I've got nginx to run my (node.js/react) application on the server. But I can't seem to connect to the database.
In the nginx.conf file I've added the following inside http.
http {
...
server {
listen 80;
server_name localhost;
...}
...}
And above the http section I have the following,
stream {
server {
listen 4000;
proxy_connect_timeout 1s;
proxy_timeout 3s;
proxy_pass stream_mongo_backend;
}
upstream stream_mongo_backend {
server 127.0.0.1:27017;
}
}
I start the nginx server, the application runs on localhost, opens up the login page but I can't login because it's still not connected to the database (mongodb).
I'm not sure if I've got my port numbers wrong or if I'm missing some configuration line inside nginx.conf.
EDIT: Ok, I had it wrong before. I wasn't supposed to connect to mongodb at this point. I was supposed to connect to the backend server of my application which would run at 4000. So now I've added a new location for /api/ inside http and proxied all requests to 4000. I still have one question though. I have to run my backend server separately for this to work. For the frontend I've created a folder and put all my build files in there so nginx starts up the webserver from there. Doing the same for the backend did not start up the server. Is there a way to get nginx to start the backend server as well?
Also can I get the frontend to run directly without the build files ? Like node would with npm start?
the port number is right. try to open up a mongo shell and see if you are able to access a mongo instance. if not, you will need to run sudo service mongodb start to start it up.
Guess it's knida late but you don't need to setup nginx for your backend to connect local mongodb.
And you need to run the frontend and backend server first by yarn start, node run or something like that if you want to run it without build files.
And then bypass the calls from 80 port to the local host servers.
For example, your FE run at 3000 port, BE run at 5000 port.
Then your nginx should be:
http {
...
server {
listen 80;
server_name localhost;
location /api/ {
proxy_pass localhost:5000;
}
location / {
proxy_pass localhost:3000;
}
...}
...}
I've tried to deploy two nodeJS apps on Digitalocean using a dokku droplet. I am using the "virtualhost naming" scheme but there is a problem.
My DNS configuration looks like this:
I have the main app and the admin app. I would expect to view the admin app when i visit app.example.com (I actually have a proper domain name) but I can see the same app when hitting example.com and app.example.com.
There is something wrong with nginx probably, but I don't know exactly what is going bad?
One thing I have noticed is that whichever app is installed first will be the one that example.com forwards to.
You are correct to attribute this behaviour to Nginx. I think it's due to it falling back to this config somehow when it doesn't detect a config for example.com
This dokku plugin (https://github.com/progrium/dokku/tree/master/plugins/nginx-vhosts) is responsible for rewriting the nginx.conf for each app every time it is deployed.
Nowadays it uses a template nginx.conf (https://github.com/progrium/dokku/blob/master/plugins/nginx-vhosts/templates/nginx.conf) although this is a fairly recent change so be sure your on a recent version.
You will end up with a Nginx config that looks like the following:
server {
listen [::]:80;
listen 80;
server_name app.example.com;
return 301 https://$host$request_uri;
}
I'm not currently sure why the above snippet results in the described behaviour. A work around is to setup your own nginx conf in /etc/nginx/sites-enabled/ with
server_name example.com;
but pointing to a holding page or whatever works for you.