Getting "invalid host header" while connecting to UI server, running on EC2 - javascript

I am running a UI application on EC2 instance. Please find below its devServer setting
devServer: {
open: false,
port: 3000,
static: path.resolve(__dirname, 'build')
}
I am able to connect UI using http://My_Public_IP:3000
But I am not able to connect with test.mydomain.com
I have setup test.mydomain.com using nginx ssl on EC2 with setting proxy_pass http://localhost:3000
Please let me know what I am missing.

Related

vue devServer proxy is not working after build

I am trying to call my API through proxy. It works fine locally. But while I build and upload to my server it does not work.
in my vue.config.js file :
devServer: {
proxy: {
"^/rest": {
target: 'https://v1.quant-ux.com',
ws: true,
changeOrigin: true,
pathRewrite: {'^/rest' : '/rest'}
},
}}
The devServer only runs in local environments (on your machine during development). It's a separate process from your build, so you can't deploy a Vue app with a built-in proxy server.
Your options:
Rewrite your URLs to the proxy target (e.g., a build script/plugin).
Run your own proxy on the server (assuming you have control of it).

How to configure the proxy url inside Webpack.config.js after deploying the app?

On my local machine, my React front-end runs on localhost:3000 and my Node/Express back-end
runs on localhost:8080.
Inside webpack.config.js (for my front-end), I use proxy so my front-end can fetch() data from the back-end via the url /api
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
}
};
After I deployed my app to Pivotal cloud, the proxy configuration no longer works because it's set to localhost.
How should I configure it so that it's not hard-coded to localhost?
How to update React localhost (127.0.0.1:3000) to another domain (local.example.com)
Might be too late on answer... First configure your hosts file to add local.example.com as your local envir(windows) see link
devServer has a host property
devServer: {
host: 'local.example.com,
port: 80
}
setting the port on 80 will allow you to visit http://local.example.com

Webpack DevServer host 0.0.0.0 not working on Windows

The following Webpack dev server configuration works without errors on macos system:
module.exports = {
// [...]
devServer: {
host: 0.0.0.0,
port: 8080,
contentBase: "/dist",
hot: true,
inline: true,
watchOptions: {
poll: true
}
},
// [...]
}
I can access the web app from mobile device connected to the same network and using the local ip of the machine (192.168.1.65:8080).
The same configuration does not work on Windows, it seems it can't open 0.0.0.0 on the browser. But using any other ip other than 0.0.0.0 does not let access from mobile devices. Does anyone know how to fix this issue on Windows?
0.0.0.0 is a non-routable meta-address used to designate an invalid, unknown, or non-applicable target (a ‘no particular address’ place holder).

How do I set up AWS Cloud9 to run an existing JavaScript app with webpack-dev-server (in development mode)?

I am trying to get my fairly typical JavaScript (React) app to run in dev mode on AWS Cloud9. I successfully cloned my repo (using https ugh), installed my npm packages, and can run scripts in the console. However, I don't know how to run and access the app in dev mode. There are a plethora of docs but they all seem to dance around the running part. My guess is I need to somehow set a custom host and port, but I also need to find what URL to use to see the app running.
Here is my devServer config:
devServer: {
// Display only errors to reduce the amount of output.
stats: "errors-only",
host, // Defaults to `localhost`
port, // Defaults to 8080
overlay: {
errors: true,
warnings: true,
},
}
If anyone comes across this, I wanted to share my solution because I know how frustrating this can be:
First, create a script in your package.json file:
"start": "webpack-dev-server --open"
Then, add the following to your Webpack config file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 8080,
compress: true,
}
Then, open the terminal in AWS Cloud 9, and run the script:
npm start
Finally, click on the link in the terminal: "Project is running at http://0.0.0.0:8080/" and your app will show in a new window.
**If it doesn't work, don't forget to allow port 80 on your Cloud 9 Security Group: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule
If you want to view the project in the preview pane, you can add the following to your devServer config:
disableHostCheck: true,
However, it's important to note that when set to true, this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.
1) First thing you need to do is to run react app on port 8080. You can do this by setting environment variable PORT to 8080 and then just starting react dev server from AWS Cloud9 terminal.
export PORT=8080
npm start
For details look at this discussion on GitHub.
2) After starting your application you can preview it by clicking Preview -> Preview Running Application at the top of AWS Cloud9.
For more details check this AWS Cloud9 doc
In webpack.config.js:
devServer: {
historyApiFallback: true,
contentBase: './',
host: process.env.IP,
//https: true,
port: process.env.PORT,
"public": "your-project.c9users.io" //no trailing slash
},
Refer Link

Deploy PeerJS server on Heroku

I have a problem with PeerJS server. I used "Deploy to Heroku" button from here:
https://github.com/peers/peerjs-server
I have no idea how can I connect with deployed cloud.
I can't find clear documentatnion about PeerJS Server.
I don't know what is the host, port, and path for my app.
var peer = new Peer('someid', {host: 'localhost', port: 9000, path: '/myapp'});
Please advice.
This how it worked for me:
var peer = new Peer('someid', {
secure: true,
host: 'your-app-name.herokuapp.com',
port: 443,
});
Your host is simply the web address to your Heroku app. For instance, if your Heroku app is named peerjsapp, then host would be 'peerjsapp.herokuapp.com'. You can find the name of your app on your Heroku dashboard. The port is usually 9000, but can be 443 if you're using HTTPS (make sure to also pass in secure:true if you're using HTTPS). You don't need to include the path unless you've changed it; if you're running the default server config, leaving out the path on your client will automatically connect. Finally, since you're hosting your own server, you don't need an ID.
• This is how I think you should do it:
const myPeer = new Peer(undefined, {
secure: true,
host: '0.peerjs.com',
port: '443'
})
• EXPLANATION:
After deploying your app to Heroku, typed 'peerjs' into the console to search for the peerjs object, from which you can navigate and find the key-value pair of
CLOUD_HOST: "0.peerjs.com"
CLOUD_PORT: "443"
The next step is just to match your own host and port with these values.
This is how I do it Console Screenshot
• NOTE:
For the secure: true part I have tried and the app works both with and without it. So it's on you to choose to include it or not. I have also found out on https://peerjs.com/docs.html this same information, check it out if you want more detailed documentation.

Categories

Resources