I've been trying to host my website (a Node app) and my Ghost blog on the same Digital Ocean droplet. I've got Nginx all set up so that requests to '/' are sent to port 8080 where my site is being served and requests at '/blog' are sent to 2368, Ghost's default port number.
The problem is that the Ghost installation doesn't seem to be able to find the assets folder in its directory. The base HTML content shows up, but devoid of styling. I've tried configuring the root to point to the subdirectory Ghost resides in to no avail.
This is an error I'm getting (404s throughout):
GET http://MYURL/assets/css/screen.css?v=59384a3875
MYURL/:126
404 (Not Found)
Picture: HTML content appears, but no styling
Nginx Config:
server {
listen 80;
server_name MYURL;
location / {
proxy_pass http://localhost:8080;
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;
}
location /blog {
rewrite ^/blog(.*) /$1 break;
proxy_pass http://localhost:2368;
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;
}
}
Ghost Production Config:
var path = require('path'),
config;
config = {
// ### Production
// When running Ghost in the wild, use the production environment.
// Configure your URL and mail settings here
production: {
url: 'http://MYURL',
mail: {},
database: {
client: 'sqlite3',
connection: {
filename: path.join(__dirname, '/content/data/ghost.db')
},
debug: false
},
server: {
host: '127.0.0.1',
port: '2368'
}
},
Any help is greatly appreciated.
You are using /assets/css/screen.css?v=59384a3875 which is not proxied I mean you did not yet added location /assets but still using. You need to add another location directive for assets like your nginx config would be
server {
listen 80;
server_name MYURL;
location / {
proxy_pass http://localhost:8080;
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;
}
location /assets {
proxy_pass http://localhost:8080;
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;
}
location /blog {
rewrite ^/blog(.*) /$1 break;
proxy_pass http://localhost:2368;
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;
}
}
another solution
You may like to remove / from all static content like use assets/css/screen.css?v=59384a3875 rather than /assets/css/screen.css?v=59384a3875 but you have remove from everywhere in html, js, css, etc.
Related
Firstly I explain my issue here.
I have 3 react apps running on 4040 4141 4242 respectively.
Initially, I created 3 servers with three ports like
server {
listen 3000;
location / {
proxy_pass http://localhost:4040;
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;
}
}
server {
listen 3001;
location / {
proxy_pass http://localhost:4141;
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;
}
}
server {
listen 3002;
location / {
proxy_pass http://localhost:4242;
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;
}
}
This was working fine. But I need to serve all these three apps from one port.
eg: http://localhost:8080/ab should redirect to port 4040 and
http://localhost:8080/ac should redirect to port 4141 like so.
Now I tried this way
server {
listen 8080;
server_name localhost;
location /examcontrol {
proxy_pass http://localhost:4040;
}
location /student {
proxy_pass http://localhost:4141;
}
location /staff {
proxy_pass http://localhost:4242;
}
}
This will redirect to the port 4040,4141,4242
but only some tags are visible like <title>,<script>,<noscript> etc no other contents is shown in the browser. (if I change /examcontrol to / I get the correct response and redirected to 4040, but no idea why these paths not working :( )
Please help if anyone knows this to configure it correctly.
I'm pretty sure you could fix this easily by changing your proxy_pass directive (note the trailing /):
proxy_pass http://localhost:4242/;
I have two applications, app1 is developed in reactJS and app2 in angularJS sharing same login session,
- Application 1
http://application-1:1234/
- APplication 2
http://application-2:2345/
My needs is to have a seemless navigation between both apps, as they share the same login credentials.
I have created NGINX reverse proxy configuration,
server {
listen 8080;
server_name http://global-ip:8080;
location / {
proxy_pass http://application-1:1234;
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;
}
location /application-2 {
proxy_pass http://application-2:2345;
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;
}
}
As the above configuration is working for only, First default root path. The other /application-2 is not able to redirect to specified path.
Any help will be appreciated.
Thanks
Praveen T
As a quick hack, try either
location /application-2/ {
proxy_pass http://application-2:2345/;
...
}
or
location /application-2/ {
rewrite ^/application-2(.*) $1 break;
proxy_pass http://application-2:2345;
...
}
but you'd better build you angular app according to your URI prefix, see instructions here. Then your original config should work as expected.
I'm trying to set up a reverse proxy using nginx for a nodejs application. My node application currently runs on port 8005 of the example.com server. Running the application and going to example.com:8005 the application works perfect. But When I tried to set up nginx my application seems to work at first by going to example.com/test/ but when I try and post or get requests the request wants to use the example.com:8005 url and I end up with a cross origin error, CORS. I would like to have the request url reflect the nginx url but I'm having no luck getting there. Below is my nginx default.conf file.
server {
listen 80;
server_name example;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /test/ {
proxy_pass http://localhost:8005/;
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;
}
}
There got to be some way to tell nginx about whichever app you are using.
So for that, either you can prefix all the apis with say test(location /test/api_uri), and then catch all the urls with prefix /test and proxy_pass them to node, or if there is some specific pattern in your urk, you can catch that pattern with regex, like suppose, all the app1 apis contain app1 somewhere in it, then catch those urls using location ~ /.*app1.* {} location ~ /.*app2.*, make sure that you maintain the order of location.
Demo Code :
server {
...
location /test {
proxy_pass http://localhost:8005/; #app1
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;
}
location /test2 {
proxy_pass http://localhost:8006/; #app2
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;
}
...
}
Other Demo for regex,
server {
...
location ~ /.*app1.* {
proxy_pass http://localhost:8005/; #app1
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;
}
location ~ /.*app2.* {
proxy_pass http://localhost:8006/; #app2
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;
}
...
}
I have followed along a digital ocean tutorial to deploy my node.js app onto VPS. Everything is working, but instead of reaching the app from myDomain.com, it's only available through myDomain.com:3700. myDomain.com only shows "Success! Virtual host is set up!"
/etc/nginx.sites-available/default:
server {
listen 3700;
server_name myDomain.com;
location / {
proxy_pass http://127.0.0.1;
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;
}
}
Oddly, if I change it to:
server {
listen 80;
server_name myDomain.com;
location / {
proxy_pass http://127.0.0.1:3700;
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;
}
}
and enter sudo nginx -s reload, nothing changes.
in my node app, I have:
...
var port = 3700;
...
I am using ghost as an npm module on an existing node app, basically it's a child app.
So my app runs on port 9200, I have setup a reverse proxy for that.
location / {
proxy_pass http://localhost:9200;
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;
}
Then I configured my ghost app inside my main app.
// server.js
ghost().then(function (ghostServer) {
app.use(ghostServer.config.paths.subdir, ghostServer.rootApp);
ghostServer.start(app);
});
// node_modules/ghost/config.js
production: {
url: 'http://example.com/blog',
mail: {},
database: {
client: 'sqlite3',
connection: {
filename: path.join(__dirname, '/content/data/ghost.db')
},
debug: false
},
server: {
// Host to be passed to node's `net.Server#listen()`
host: '127.0.0.1',
// Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
port: '2368'
},
paths: {
contentPath: path.join(__dirname, '/blog/')
}
}
Since ghost handles the /blog route the assets path expects /blog to be in the route, so I had to change it from /content.
This works fine at http://example.com:9200/blog, but after setting up a reverse proxy for /blog
location /blog {
proxy_pass http://localhost:9200;
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;
}
Then trying to go to http://example.com/blog all I can get is the html, the assets are not being served on this route, I suspect the location needs to include a wildcard like location /blog/*?
The following helped me solve my problem.
Nginx - reverse proxy a Ghost blog with /subfolder redirect
http://www.allaboutghost.com/how-to-install-ghost-in-a-subdirectory/
location ^~ /blog {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:2368;
proxy_redirect off;
}