I've been struggling with this awkward issue for well over a week now and couldn't resolve it. Any help will be highly appreciated!
I'm building a web application that uses Nginx as the proxy, React for web's front-end, GoLang for my backend API. The entire application is running on Docker (version 19.03.5).
After I ran npm install to install some new packages and went to https://127.0.0.1:8000/ to start building the app, a blank white screen appeared and new error inside my Chrome dev tools:
sockjs.js:689 Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
at new SockJS (sockjs.js:689)
at new SockJSClient (webpack:///(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:39:18)
at initSocket (webpack:///(:8000/webpack)-dev-server/client/socket.js?:20:12)
at Object.eval (webpack:///(:8000/webpack)-dev-server/client?:176:1)
at eval (webpack:///(:8000/webpack)-dev-server/client?:177:30)
at Object../node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8081 (bundle.cf100e5b1875c7903444.js:9267)
at __webpack_require__ (bundle.cf100e5b1875c7903444.js:727)
at fn (bundle.cf100e5b1875c7903444.js:101)
at eval (webpack:///multi_(:8000/webpack)-dev-server/client?:1:1)
at Object.0 (bundle.cf100e5b1875c7903444.js:10880)
At this point, I was told to add https: true to my webpack.config.js as follows:
devServer: {
contentBase: buildPath,
inline: false,
watchContentBase: true,
compress: true,
historyApiFallback: true, // any routes will fetch bundle.js file
disableHostCheck: true, // for nginx proxy
port: 8081,
https: true,
},
Then I rebuilt my Docker with the following command docker-compose -f development.docker-compose.yml up --build
and tried to access https://127.0.0.1:8000/ whether it solved my issue. Unfortunately, after the successful Docker-compose built, I'm getting 404 Not Found from Nginx.
After little digging inside Nginx container, I found the following log:
nginxbetteralpha | 2019/12/30 20:40:02 [emerg] 1#1: host not found in upstream "goapi:3000" in /etc/nginx/conf.d/dev_better_alpha.conf:2 nginxbetteralpha | nginx: [emerg] host not found in upstream "goapi:3000" in /etc/nginx/conf.d/dev_better_alpha.conf:2
My dev partner tried the following solutions found here Docker Networking - nginx: [emerg] host not found in upstream but none of them solved the problem.
Below you can look into my relevant config files:
webpack.config.js
module.exports = () => {
return {
context: contextPath,
entry: {
main: ["@babel/polyfill", "webpack/hot/dev-server", indexJsPath],
},
output: {
// TODO: add this module for css bundle
// https://webpack.js.org/plugins/mini-css-extract-plugin/
// https://medium.com/@tomaskoutsky/hey-webpack-can-you-bust-my-cache-21350f951220
// filename: "[name].[hash].js",
filename: "bundle.[hash].js",
publicPath: "/", // very important otherwise index.html has src="bundle.js" instead of src="/bundle.js" => nginx wont be able to find it in sub paths
path: buildPath,
},
devServer: {
contentBase: buildPath,
inline: true,
watchContentBase: true,
compress: true,
historyApiFallback: true, // any routes will fetch bundle.js file
disableHostCheck: true, // for nginx proxy
port: 8081,
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.css$/,
exclude: [/src/],
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.css$/,
exclude: [/node_modules/],
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options: {
modules: true,
url: true,
localIdentName: "[local]___[hash:base64:5]", // it has to be same as `generateScopedName` in .babelrc react-css-module config setting !!
},
},
{ loader: "postcss-loader" },
],
},
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 1000,
outputPath: "images",
name: "[name]-[hash:6].[ext]",
},
},
{
loader: "image-webpack-loader",
options: {
disable: true, // in dev..
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
loader: "url-loader",
},
],
},
plugins: [HTMLWebpackPluginConfig, dotEnvPlugin],
resolve: {
extensions: [".js", ".jsx", ".json", ".css"],
},
};
};
dev/dev.conf
upstream goapi {
server goapi:3000;
}
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://webpackdevserver:8081;
}
location /api {
# proxy to golang API
proxy_pass http://goapi;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
# root /usr/share/nginx/html;
}
}
dev/conf.d/dev.conf
upstream goapi {
server goapi:3000;
}
server {
# http
listen 80;
# server_name _;
server_name localhost;
location / {
# redirect any requests to the same URL but on https
return 301 https://$host$request_uri:8000;
}
# https://serverfault.com/questions/10854/nginx-https-serving-with-same-config-as-http
#http://nginx.org/en/docs/http/configuring_https_servers.html#single_http_https_server
}
server {
# https
listen 443 ssl;
# server_name _;
server_name localhost;
# location of the self-signed SSL certificate
ssl_certificate /usr/share/ssl_certs/cert.pem;
ssl_certificate_key /usr/share/ssl_certs/key.pem;
location / {
proxy_pass http://webpackdevserver:8081;
}
location /api {
# proxy to golang API
proxy_pass http://goapi;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
# root /usr/share/nginx/html;
}
}
dev/nginx.conf
user nginx;
worker_processes 2;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
Any help will be greeeatly appreciated !!!
