I'd like to serve static ressources such as images, js bundles, html pages... with Traefik like I was able to do with nginx
# nginx config
server {
root /www/data;
location ~ \.js {
root /www/bundles;
}
}
Many thanks
Cheers
Traefik doesn't serve static files (it's a not a web server it's a reverse proxy/load balancer).
You must use a container, which contains a web server with your files.
To extend the answer related to how files can be served:
If you are already serving files with nginx and want to migrate to Traefik you can still have nginx serving static files behind Traefik. I do this myself in hobby projects running docker standalone on a VM.
The best way is probably still to use containers/buckets such as S3 or Swift for static files as it will offload the traffic to the application server and provide a single location for these files (makes things easy when clustering) .. but if you don't have a lot of traffic and use a very simple setup, the nginx way is more than fine.
The issue around static files was discussed here : https://github.com/containous/traefik/issues/4240
Related
I am a bit struggle with support to a react js to support 2 different subdomains. Followings are the subdomains I need my app to support
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
As you can see, react-app-path is also changing with the subdomains. I have defined PUBLIC_URL and REACT_APP_PATH in my .env file as below.
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
With above env vars app-dev... URL is working. If I change to the path to apps/myapp then www subdomain in working. I need a way to support both subdomains at once
How can I achieve this?
Finally, I solved this problem with the following steps; I was using Nginx to be redirected to the same host. The problem I have was with the paths.
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
According to my Nginx configurations, both URLs were redirected to / in the server. Then the app couldn't find the static files because paths were different with domains. So to fix this, I did as below.
First, remove PUBLIC_URL from my env file. Then app files will be hosted at the / location
Added homepage attribute to package.json file. adding homepage will serve assets relative to index.html. Read more about homepage. Using `"homepage"` in package.json, without messing up paths for localhost
Since the app is using internal routing, I added simple Nginx rule to rewrite the location of static files as below.
rewrite /static/(.*)$ /static/$1 break;
This solved my problem with supporting two doamins.
No way, Your React app will be compiled into static HTML, JS, and CSS files, and the only time you can pass parameters to the build tool is before building, which is what you're doing right now. Once the building is complete, it can't be changed.
You can write two shell script, with different environment variable. Then invoke each of them will build different web app.
For business reasons, I have to host my React app on one domain and serve the images/fonts from another domain (ie. S3). Not sure how I can configure the app to do this?
An example, I want to host my React app at:
http://kamilski.com/#/
And then serve my static assets (images and fonts) from:
http://camel.assets.s3.com/***
I don't know how to configure my create-react-app or Webpack to do this. I know that PUBLIC_URL is available but that still forces me to run the React app and assets on the same server.
This isn't too bad - I do a similar thing with a couple of my apps.
First, get the assets you want onto S3 using an S3 bucket.
There's a good youtube video for that here (this is about uploading from your react app, but the AWS setup is similar in some ways): https://www.youtube.com/watch?v=cDj4LPTLR3o
So once you have your aws bucket setup, you'll probably have one called "site_images" for example. At that point you can source those images from S3 like you would any other image:
https://camel.assets.s3.amazonaws.com/images/SOME-IMAGE-ON-AWS
You'd load fonts in a similar way via your css file(s) most likely with something like:
#fontface {
font-family: 'My Awesome Font';
src: url('https://camel.assets.s3.amazonaws.com/fonts/SOME-FONT-ON-AWS')
}
How you do this specifically will depend on your configuration. You'll need to adjust our aws bucket for CORS which can be a bit of a snag. These links should should help you in the right direction though!
https://coderwall.com/p/ub8zug/serving-web-fonts-via-aws-s3-and-cloudfront
Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
Did you try to use plugins like webpack-s3-plugin
You can define rules for all assets you need.
And of cause you'll have to eject CRA or use something kind of react-app-rewired or rescripts.
I want to debug my react app locally in the browser,
but i set devtool property to hidden-source-map in webpack.config.js file in order to hide my source code in production.
Is there any possibility to debug locally without exposing my source map to production?
You can enable source-map on production, but host it in a server that only allows request from whitelisted IPs. If a request came from a non-whitelisted IP, you can just return error 403 or 404.
Let's say you are uploading your source maps to amazon s3:
// we use webpack.SourceMapDevToolPlugin for more flexible setups. Set the 'devtool' option to 'false' when you are doing this.
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: '[name].[contenthash].js.map',
// this is a s3 private bucket that is only accessible via whitelisted IPs
// regular user will not be able to access the bucket
append: `\n//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/[url]`,
...options,
}),
// other plugins.
]
Your generated JS will still have the magic comment at the end of the file:
//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/main.js.map
But browser devtools can only download the source map if it is accessing it from a whitelisted IP, such as your office network, a company VPN, etc.
Another approach is you can just set the sourceMappingURL to localhost. With this approach, you should have all the *.map files available locally on your machine. When you want to debug production code, simply start a static server (e. g.: ecstatic) locally to serve the source maps. This way, you can be sure only you can access the source maps. But, it requires manual work to download and serve the source maps locally.
You can use the environment variable for this. It would be something like this:
devtool: process.env.SOURCE_MAP ? 'inline-source-map' : 'hidden-source-map',
Then you could run tests like this for example:
SOURCE_MAP=true yarn test (just an example)
You should checkout this module https://www.npmjs.com/package/dotenv. It's possible to create .env files and use the configuration for different flows, like test and build, so you don't have to specify env variables manually, before running the command.
If you don't want to use the environment variables, you could create separate webpack config files, maybe one that has all the common stuff between production and test environments and then more specific configs that extend the common config (one for test env with source maps enabled and one for production with source maps disabled).
similar questions have been asked before, regarding grails 2(.3, .4). I find it strange that i could not find a way to do this, as it seems a standard use-case to me.
I simply want to serve html-pages, including their linked .css and .js (angular and jquery content) when i run grails run-app.
I want to check if my http-calls are handeled correctly on both sides - without needing to deploy a .war and configuring a database.
afaik grails run-app simply starts a jetty/tomcat - both of which can obviously serve .html pages. What do i have to do to make the grails development-tooling deploy my files?
I need to make http-requests,
so using a different Server would violate JS-SOP,
while deploying the .war would greatly slow down the development process
I've so far only found clunky jsonp, proxy, .war deployment solutions, or solutions for grails 2.x
I tried placing the files literally everywhere in the projects' structure (/src/main, /src/main/resources, /src/main/public, the assets folder and its subfolders, created web-app directories in every subdirectory, the Init, domain, conf directories - you name it)
Add the index.html to src/main/resources/public
Then add this to UrlMappings.groovy:
"/"(redirect:"/index.html")
For grails >= 3.0.12
Location of static resources
In order to resolve an issue around how POST requests are treated for
REST applications on non-existent resources, static resources located
in src/main/resources/public are now resolved under the /static/** URI
by default, instead of the base URI /**. If you wish to restore the
previous behaviour add the following configuration:
grails.resources.pattern = '/**'
https://github.com/grails/grails-core/releases/tag/v3.0.12
Contrary to the accepted answer, you don't need a redirect. I have made able to make this work with the following config:
UrlMappings.groovy
"/"(uri: "/index.html")
application.yml
grails:
resources:
pattern: '/**'
Finally, you just need to have your index.html file located under src/main/webapp
Is there a way of serving static files (images) not from the /static folder in webpy? What I would like to do is show images that are scattered in various directories, and moving all of them to /static is really not an option. If it is not feasible in webpy, are there any other python web frameworks that would do this?
Thanks,
v923z
You can easily do it when deploying your web.app under different webserver. But if you want to set static path in web.py development server then you'll have to patch webpy's static middleware or write your own. Please check my answer to the same question here: Changing the static directory path in webpy