I have a server, and 2 Express-based project running on port 3000 and 4000. Landing page has default template nginx html code, with Botkit iframe embed code. Port 3000 Express server is Botkit Starter Guide project, running with no modification. Port 4000 Express server is just Hello World project. Both server executed using pm2.
Below is my /etc/nginx/sites-enabled/default config:
server {
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
return 301 http://hwsrv-492795.hostwindsdns.com;
location / {
try_files $uri $uri/ =404;
}
}
server {
listen 80;
listen [::]:80;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name hwsrv-492795.hostwindsdns.com;
location / {
try_files $uri $uri/ =404;
}
location /test01/ {
proxy_pass http://142.11.241.150:3000/;
}
location /test02/ {
proxy_pass http://142.11.241.150:4000/;
}
}
So here is what I can't solve:
Botkit Chatbot is successfully loaded on http://hwsrv-492795.hostwindsdns.com.
While Botkit Chatbot behaves normally on http://142.11.241.150:3000/, it doesn't do so on http://hwsrv-492795.hostwindsdns.com/test01/. It just load /index.html, but failed (404) to load /css/styles.css, /embed.js, and /chat.html
Hello world behaves just fine on both http://142.11.241.150:4000/ and http://hwsrv-492795.hostwindsdns.com/test02/.
I can curl those file from the server terminal, meaning that there is no problem on accessing those file. The question is, how do I enable or allow linked files and folder for sites that is generated using Express server to be readable on browser?
Related
I did not mention port number in my api end point, but how server decided to serve this request using port 80 or 443
const {data} = await axios.get('/api/users/currentuser');
Use something like this in NGINX:
server {
root /var/www/html;
server_name _;
# this is the react/angular fronted application endpoints
location / {
try_files $uri $uri/ /index.html;
}
# this is the api endpoints
location /api {
proxy_pass http://127.0.0.1:8000;
}
}
However you have not explicitely mentioned in the question that you are using NGINX or not but you have nginx in one of the 5 tags of this question, so I am supposing that you must be using NGINX and so, I am answering in that context.
I have a VPS based on Linux Ubuntu.
I have two websites.
I have two domain names for both websites.
One website with domain trail-notes.tk is successfully deployed to VPS and is running on server without any ports in config file. Website is working fine. The problem is with the second website which I want to run on a specific port 4000 but on the same ip address of my server
When I did all the configurations and hit control-surface.ml it returns error "502 Bad Gateway"
How to deploy Vue applications/websites properly?
Config file of first website trail-notes.tk for nginx:
server {
listen 80;
server_name trail-notes.tk www.trail-notes.tk;
root /home/kentforth/webapps/trail-notes/dist;
index index.html index.htm;
location / {
root /home/kentforth/webapps/trail-notes/dist;
try_files $uri $uri/ /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
What I already did:
Created Vue project
Created config file in vue project "vue.config.js"
Added port configuration to this file:
module.exports = {
devServer: {
port: 4000
}
};
Pushed code to github
5.Entered my VPS server
Cloned directory from github
Installed necessary dependencies:
npm install --production
Installed Vue CLI for building project
npm i #vue/cli-service
Built dist folder for production:
npm run build
in directory /etc/nginx/sites-available/ created file control-surface-frontend.conf
Added configuration to that file:
server {
listen 80;
server_name control-surface.ml www.control-surface.ml;
root /home/kentforth/webapps/vue-test/dist;
index index.html;
charset utf-8;
location / {
proxy_pass http://localhost:4000;
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;
}
location = /favicon.ico { access_log off; log_not_found off; }
}
Activated symlink for that file:
sudo ln -s /etc/nginx/sites-available/control-surface-frontend.conf /etc/nginx/sites-enabled/control-surface-frontend.conf
Tested symlink:
sudo nginx -t
Restarted nginx:
sudo systemctl restart nginx
15.Checked that nginx is running:
What did I do wrong?
I made wrong config file for nginx.
Here is my correct nginx config file and my website works fine:
server {
listen 80;
listen [::]:80;
server_name trail-notes.tk www.trail-notes.tk;
root /home/kentforth/webapps/trail-notes/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
I'm hosting a vue history site using nginx docker and the nginx config is the following
server {
listen 80;
location / {
root /var/www/dist/;
index index.html index.htm;
try_files $uri $uri/ index.html;
}
}
I can access "http://the.ip.of.server". However when I tried to visit "http://the.ip.of.server/search", it shows the following error. It tries to open "/etc/nginx/htmlindex.html" instead of "/var/www/dist/index.html" which makes no sense.
2020/05/10 04:24:01 [error] 7#7: *2 open() "/etc/nginx/htmlindex.html" failed (2: No such file or directory),
client: xx.xx.xx.xx, server: , request: "GET /search HTTP/1.1", host: "the.ip.of.server"
I have no idea where "/etc/nginx/htmlindex.html" comes. The configuration should be right since I can access /.
You should put the root element outside the location block.
server {
listen 80;
root /var/www/dist;
index index.html index.htm
location / {
try_files $uri $uri/ =404;
}
}
After change the configuration remember to restart your nginx instance (if using docker force build image).
I sometimes develop remotely thanks to vscode-remote and nginx reverse proxy
flutter run -d chrome --web-port=4000
I want to open flutter web dev server on other ip than http://localhost:4000
I can do that with nginx and webpack-dev-server
There is no way to open in other browser except chrome (some proxy dependencies interal from chrome)
nginx config file
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
proxy_pass http://localhost:4000;
proxy_set_header Host $host;
}
}
If you are looking for opening the flutter web app in other browser during development this is not possible as of now. Check the note here on top of this link. One option is to run flutter build web and host the build\web folder. Once hosted this can be opened in any browser like Firefox or so. But I guess you cannot debug in this mode.
Im using nginx as Web Server and Reverse Proxy with SSL enabled.
The Web Server serves an WoltLab Suite Forum 5.0.0 (formerly known as Burning Board) and proxied some subdomains to different hosts like a NodeJS backend, an Tomcat backend and many other different services.
This worked great so far, but now i have the problem that i can no longer use subdomains to accomplish this.
Please don't ask why, please don't.
Now, that i can no longer use subdomains, Im trying to get it working with sub directories.
An example:
I had xyz.example.com point to my nginx server at 12.13.14.15.
nginx proxied all requests to xyz.example.com to 10.20.30.40:1234
Now i want nginx to proxy all requests to example.com/xyz/ to 10.20.30.40:1234
I got this working with Apache Archiva as backend service, but all other services like my NodeJS backend are refusing to work correctly with my current configuration.
It sends me to the BurningBoard wich shows me their Page-Not-Found page.
example.com/xyz/admin/index.php becomes to example.com/admin/index.php wich wont work of course.
The directory that proxies to Archiva has the exact same configuration, just other directory names of course.
The Archiva URL looks like this after i call it from Web:
example.com/repo/ becomes example.com/repo/#welcome and shows me Archivas Welcome Page.
This is exactly what i want for my other services too.
Here are my current configuration files for nginx (sensitive data replaced with X):
<=== sites-available/default ===>
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name XXXX.XX www.XXXX.XX;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
include snippets/ssl-XXXXX.XX.conf;
include snippets/ssl-params.conf;
root /var/www/html;
include /etc/nginx/snippets/proxies.conf;
# the last try_files argument is for SEO friendly URLs for the WSF 5.0
location / {
index index.php;
try_files $uri $uri/ /index.php?$uri&$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
}
# Lets Encrypt automation
location ~ /.well-known {
allow all;
}
location ~ /\.ht {
deny all;
}
}
<=== snippets/proxies.conf ===>
# Apache Archiva
location /repo {
rewrite ^/repo(/.*)$ $1 break;
proxy_pass http://XXXXXXXX:XXXXX;
return 404;
}
# Git Solution
location /git {
rewrite ^/git(/.*)$ $1 break;
proxy_pass http://XXXXXXXX:XXXXX;
return 404;
}
# Filehosting
location /cloud {
rewrite ^/cloud(/.*)$ $1 break;
proxy_pass http://XXXXXXXX:XXXXX;
return 404;
}
# NodeJS
location /webinterface {
rewrite ^/webinterface(/.*)$ $1 break;
proxy_pass https://XXXXXXXX:XXXXX;
include /etc/nginx/snippets/websocket-magic.conf;
return 404;
}
Any ideas how to solve this problem?
Also, please tell me if you need more informations like nginx' version or the like.