I am trying to configure CakePHP 3 on OSX running nginx. The default page reports that everything is working except URL rewriting. However, I have URL rewriting working for page URLs (just followed the instructions for nginx setup). The only thing that's not working is loading static assets from webroot. I've been digging through a ton of similar stackoverflow questions and none of the responses seem to work.
vhost file:
server {
listen 80;
server_name albums.dev;
root /Users/username/Sites/albums;
access_log /Library/Logs/default.access.log main;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /usr/local/etc/nginx/conf.d/php-fpm;
}
}
Again: The entire CakePHP application seems to be working correctly, except the static assets in /webroot/ are coming up as 404.
change the root .. you must point to webroot of your project
if you want i can give my conf to you
Related
I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:
someRoute/
index.tsx
register.tsx
[id].tsx
My nginx.conf file has the following content:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html /register.html;
}
}
What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don't.
My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won't happen, since it is a dynamic route. As per register.html, I really don't know what's wrong.
How do I get someRoute/register and someRoute/[id] working?
Problem:
We have a CRA (Create React App) application that we need to deploy to many different environments. We're using Kubernetes to spawn these environments so we will have many of them, the number is not fixed.
The problem is that those environments must be under the same domain name and must have the same path structure. (this is a business requirement and we cannot influence it).
Example of environments:
https://www.example.com/company/app-env01/react_application/
https://www.example.com/company/app-env02/react_application/
https://www.example.com/company/app-env03/react_application/
https://www.example.com/company/app-env-foo/react_application/
https://www.example.com/company/app-env-bar/react_application/
https://www.example.com/company/app/react_application/
So the fixed structure is: https://www.example.com/company/app[-____]/react_application/
The way to make it work on a single environment would be to specify PUBLIC_URL in package.json build script:
...
"build": "PUBLIC_URL=/company/app-env01/react_application react-scripts build",
...
This works fine for ONE environment only (env01 in this case), but we need to deploy a single build artifact (static file bundle) to MANY different environments, which have different PUBLIC_URLs.
Is this possible to achieve without building the application for every environment?
How we build the artifact:
Our deployment artifact is a Docker image, which is just Nginx serving previously built React static files.
How we perform routing:
The Browser is hitting our Kubernetes Ingress, which strips the path away and forwards the request to a Docker Container (in a K8S Pod) which is running Nginx. Nginx is serving the CRA static files under the root directory /.
Example:
Browser
↓
https://www.example.com/company/app-env01/react_application/
↓
Ingress
/
↓
Nginx
↓
Serves the CRA static files
This works fine, the problem (to me at least it seems) is in React Router. We are setting the basename dynamically, and it is being set correctly (https://reactrouter.com/web/api/BrowserRouter/basename-string). The problem (I assume) is in this PUBLIC_URL. Deploying the application without specifying it does not work. And it needs to be known at build time. That's the main issue.
IMPORTANT:
We are using React Router, so it must work properly when the application is deployed
We want to deploy a single build artifact (a single Docker Image) across all environments
Solution
#Emile got me thinking about using relative URLs again, along with configuring Nginx to handle it correctly. Thank you!
Adding this location block to the Nginx configuration solved the problem:
location ~ .(static)/(js|css|media)/(.+)$ {
root /usr/share/nginx/html;
try_files $uri $uri/ /$1/$2/$3;
}
Here's the full configuration (simplified for the sake of clarity):
server {
listen 80;
# This rule internally redirects any relative requests for static files so that they start from the root
# Example, it internally redirects `/RANDOM/SUBPATH/static/js/main.xxx.chunk.js` to `/static/js/main.xxx.chunk.js`
# Effectively, it strips everything that comes before `/static...`
location ~ .(static)/(js|css|media)/(.+)$ {
root /usr/share/nginx/html;
try_files $uri $uri/ /$1/$2/$3;
}
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Further explanation
The reason that using relative URLs originally did not work is:
This would work just fine:
/company/app-env01/react_application/static/js/xxxxxxxx.chunk.js
but this would not:
/company/app-env01/react_application/RANDOM/SUBPATH/static/js/xxxxxxxx.chunk.js
I needed a way to "strip off" the /RANDOM/SUBPATH part, whatever that part is, and I achieved it adding the Nginx location block listed above.
So I have a SPA that I built using Create-React-App. It works completely fine for local dev, and I wanted to deploy the built app using nginx.
I set up my Dockerfile and nginx.conf, and at first all seemed to run fine. But then, I noticed weirdest issue.
Most of the app is working fine, but when I try to access a nested URL directly (i.e. not by navigating to it through the app -> This works fine. Problem happens only when I access the URL directly, or refresh the page), there are errors in the console/network while fetching the built files. Say I'm accessing localhost:3000/app/potato, I see my browser is trying to access files from localhost:3000/app/static/js/2.ebff4827.chunk.js (instead of localhost:3000/static/js/2 .ebff4827.chunk.js)
Accessing localhost:3000/app works fine, but localhost:3000/app/ (with trailing /) has the same weird behaviour.
As a result, the browser fails to load the page...
Here's my nginx.conf (although I don't believe this to cause my error, as I set it up with a blank CRA and it worked fine https://github.com/piaverous/cra-nginx-demo):
server {
listen 3000;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Does anyone have any clue on what could be causing the issue ? I'm totally at a loss here
So it turns out this problem came from my webpack build.
In my package.json, i had homepage: "./", which caused the path resolving issues.
Just removing this field seemed to fix this issue ! Nginx config was fine :)
I have a react website which I am hosting inside a Docker container that is running Nginx, which I have running on Port 3000. I then have an instance of Nginx on my host machine, which I have a reverse proxy pointing to 127.0.0.1:3000.
Everything works fine, except I have a Twitter authentication call, which uses a callback. When the url points back to mysite.com/authenticated, this is asking Nginx for the path which of course falls over.
I have scoured the internet and have found many posts indicating I should have this in my nginx default file:
location / {
proxy_pass 127.0.0.1:3000;
try_files $uri $uri/ /index.html;
}
When I then navigate to my website, even the root, I am getting unexpected token < in the console errors.
What could be causing this issue?
Lets say you are calling external twitter api http://twitter/auth.com/twitter/authentication for authentication.
And in your react action file you have give url as /twitter/authentication to call.For this case following will be the configuration.
server {
location / {
proxy_pass http://127.0.0.1:3000;
}
location /twitter/authentication {
proxy_pass http://twitter/auth.com;
}
}
You have to write every location config inside server in nginx config.
After any modification in this config, you have restart nginx.
For me it was the link to app.js
<script src="/app/bundle.js"></script>
When I tried to reach my App at
http://localhost:8080/serv9090
the browser tried to find /app/bundle.js via
http://localhost:8080/app/bundle.js
Which is not found at localhost:8080 (nginx)
For a first try I changed
<script src="/app/bundle.js"></script>
to
<script src="http://localhost:8080/serv9090/app/bundle.js"></script>
This worked fine.
Hope this helped.
I solved this issue by adding the following into the nginx conf file:
location ~ .(static)/(js|css|media)/(.+)$ {
try_files $uri $uri/ /$1/$2/$3;
}
For clean urls in angularjs I must use $locationProvider.html5Mode(true); but when I refresh my page it shows a 404.
I've read that I need to configure server file.
Structure
/html -
/views -
home.html
about.html
contact.html
index.html
app.js
What I've done so far:
nginx.conf
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
The Angular HTML5 location mode basically took advantage of HTML5 history API to "simulate" URL changes in client. But the URLs are probably not real (not exist) from the point of view from server therefore it's not possible to locate those pages on the server. There are generally two solutions can let server to know the URLs:
Use server-side rendering. This is widely used by another framework called ReactJS. And actually AngularJS 2.0 can work on a server too. Therefore it is possible to generate the real pages server-side and serve them to the client.
Use HTTP server rewrite techniques. This is what you are trying to do. The idea is to forward all related requests to a single AngularJS entrypoint HTML page, normally it's the index.html from the root.
For your case, assume the entrypoint of AngularJS is /index.html. Try this:
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
The previous solution is not perfect, because it will test every request arbitrarily. We can avoid unnecessary URL looking up by specify more detailed rules:
server {
root /html/views;
index index.html;
rewrite "^/users" /index.html last;
rewrite "^/pages" /index.html last;
...
}
Use regular expressions to match the URLs you want to serve with Angular.