Ghost as an npm module not serving assets? - node.js

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;
}

Related

Strapi /admin gives 404 errors after redirect Nginx

After installing Strapi I only get error messages.
What have I done so far?
nginx.conf
# Strapi API and Admin
location /api/ {
rewrite ^/api/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:1337;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $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 Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
server.js
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
url: env("PUBLIC_URL", "https://wp-admin.app/api"),
app: {
keys: env.array('APP_KEYS'),
},
});
I am getting the following error messages:
The images and js not loading?
clicking the button to create an admin user a new page to /admin opens and gives the error in the console
Is there anyone who knows what the problem could be?
I also had the same issue. You should add slash to at the end of url in public_url
url: env("PUBLIC_URL", "https://wp-admin.app/api/"),
or add in env
PUBLIC_URL=https://wp-admin.app/api/
after that npm run build now it will be work.

nginx doesn't redirect backend

I've nginx config that route frontend app to specific port, and backend to specific route
here's my configs
server {
listen 80;
server_name test.com www.test.com;
location / {
proxy_pass http://127.0.0.1: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;
proxy_redirect off;
}
location /api {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
}
}
when trying to access test.com directly it works, but when trying to access test.com/api , it doesn't work, then if return to main path test.com it also doesn't work, it seems like nginx stopped working after accessing the /api

Webpack Dev Server with NGINX proxy_pass

I'm trying to get webpack-dev-server running inside a Docker container then accessing it through a NGINX host. The initial index.html loads but the Web Sockets connection to the dev server cannot connect.
VM47:35 WebSocket connection to 'ws://example.com/sockjs-node/834/izehemiu/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400
I'm using the following config.
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream webpack_dev_server {
server node;
}
server {
server_name _;
listen 80;
root /webpack_dev_server;
location / {
proxy_pass http://webpack_dev_server;
}
location /sockjs-node/ {
proxy_pass http://webpack_dev_server/sockjs-node/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host; # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass
proxy_http_version 1.1; # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version
# WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
Proxy pass should be ip and port of your webpack-dev-server container and you need proxy_redirect off;
location /sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass http://node:8080;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
Also don't forget to add poll to your webpack-dev middleware
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}

Nginx proxying Ghost blog and Node App unable to find assets

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.

Hosting two Node.JS apps on same domain

I have two node js applications I am running on the same box and I would like for it to run the first node js app for all routing except if the url is www.domain.com/blog to go to the other node js application. Is this even possible with this setup or do I have to setup subdomains and use nginx or something?
You can achieve this using nginx as a reverse proxy.
Assuming you have your blog node process running on port 3000 and another node process on 3001 a simple config would look like;
upstream blog {
server 127.0.0.1:3000;
}
upstream other {
server 127.0.0.1:3001;
}
server {
listen 80;
server_name www.domain.com;
location /blog {
proxy_pass http://blog;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto tcp;
proxy_set_header X-NginX-Proxy true;
}
location / {
proxy_pass http://other;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto tcp;
proxy_set_header X-NginX-Proxy true;
}
}

Resources