I'm connecting to remote mysql DB from my next app with serverless-mysql library. To achieve that I'm using a SSH tunnel with ssh2 library. The app is working right but I wanna take off the env vars from my next.conf.js file in order to push the code to a public repository and keep my secrets safe. My next.config.js file now looks like:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
config.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
return config;
},
webpackDevMiddleware: config => {
return config
},
env: {
SSH_PASS:'supersecretpassword',
SSH_USER:'root',
SSH_HOST: 'XXX.XXX.XXX.XXX',
MYSQL_HOST:'127.0.0.1',
MYSQL_DATABASE:'databasename',
MYSQL_USERNAME:'username',
MYSQL_PASSWORD:'dbpassword',
GOOGLE_CLIENT_ID:'xxxxxx',
GOOGLE_CLIENT_SECRET:'xxxxxx',
NEXTAUTH_URL: 'http://localhost:3000/',
}
};
I created a file called .env in the root of the project and added the following content:
SSH_PASS="supersecretpassword"
SSH_USER="root"
SSH_HOST="XXX.XXX.XXX.XXX"
MYSQL_HOST="127.0.0.1"
MYSQL_DATABASE="databasename"
MYSQL_USERNAME="username"
MYSQL_PASSWORD="dbpassword"
GOOGLE_CLIENT_ID="xxxxxx"
GOOGLE_CLIENT_SECRET="xxxxxx"
NEXTAUTH_URL=http://localhost:3000/
And now application is throwing this error message when trying to query db
sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client'
I googled the error and tried some of the suggestions like ALTER USER and setting a new password. But I think that is not a problem with DB, because it works with exactly the same configuration. I put a console.log on the moment when app connects to db and checked that the configuration object that is provided to connect method is the same in both cases.
There is any difference between load env vars from .env file and loads them from next.config.js?
Thanks in advance!
I think since version 9.3 next.js creates, .env.local file and next automatically adds those variables to process.env but only on the server-side. In order to access env variables on browser, inside next.config.js
env: {
SSH_PASS:process.env.SSH_PASS, // .SSH_PASS variable name in .env.local
....
....
}
if you want to create your own .env file and then use this package: env-cmd
But you have to inform next.js in your scripts:
"dev": "env-cmd -f .env next dev"