Hi I've been struggling for a while to figure out how to make an app on an AWS Windows server 2016 instance publicly accessible. My Ec2 traffic has been opened for inbound 8080. netstat shows 8080 is listening. The app can run on localhost on the EC2 by running command "npm run dev" but cannot be accessed publicly.
webpack.config.js:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './app/javascripts/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.js'
},
plugins: [
// Copy our app's index.html to the build folder.
new CopyWebpackPlugin([
{ from: './app/index.html', to: "index.html" },
{ from: './app/javascripts/browser-solc.min.js', to: "browser-solc.min.js" }
])
],
...
In package.json:
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server",
...
I tried to modify "dev": "webpack-dev-server" to be "dev": "webpack-dev-server --inline --port 8080 --hot --host ec2_public_DNS_address", the console said it's run on the DNS with port 8080 open but I still cannot access it publicly.
Please help!
Related
WARNING: Your package.json does not specify a supported Node.js version. Please pin your application to a major version of the Node.js runtime.
Application detection failed: Error: node.js checker: Neither "start" in the "scripts" section of "package.json" nor the "server.js" file were found.
I added below in package.json
"engines": {
"node": "^13.8.0",
"npm":"^6.13.4"
},
app.yaml file
# [START runtime]
runtime: nodejs
env: flex
service: dev
handlers:
- url: /.*
secure: always
script: auto
redirect_http_response_code: 301
automatic_scaling:
min_num_instances: 1
max_num_instances: 2
cool_down_period_sec: 60
cpu_utilization:
target_utilization: 0.80
package.json
"scripts": {
"start": "serve -s ./build",
"prestart": "npm i -g serve",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
cloudbuild.yaml
steps:
- name: gcr.io/cloud-builders/npm
entrypoint: 'npm'
args: [ install ]
- name: gcr.io/cloud-builders/npm
entrypoint: 'npm'
args: [ run, build, --prod ]
- name: gcr.io/cloud-builders/gcloud
entrypoint: 'npm'
args: [ app, deploy, '[public/app.yaml]', --version=$SHORT_SHA ]
If you're using the GAE standard, keep in mind that it currently supports Node.js 10 and 12 runtimes.
Also, as the official GCP documentation mentions:
By default, the runtime starts your application by running node
server.js. If you specify a start script in your package.json file,
the runtime runs the specified start script instead.
"scripts": {
"start": "node app.js"
}
Please, have a look at this GitHub repository, which contains a simple app for GAE standard, which you could use as a reference.
EDIT
You need to make sure that your start script is starting a web server that responds to HTTP requests on the port specified by the PORT environment variable, typically 8080 (link).
Here you can see an example for the GAE flexible environment, where the app.js contains
// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}`);
console.log('Press Ctrl+C to quit.');
});
While the package.json has
"scripts": {
"start": "node app.js"
}
This error can be reproduced when deploying that sample on GAE with Cloud Build after removing the start script or if the app is not starting the server.
I am learning Node.js and this is my first code.
I created a file called server.js below with the code
server.js
const express = require('express');
const dotenv = require('dotenv');
//load env vars
dotenv.config({ path: './config/config.env'});
const app = express();
const PORT = process.env.PORT || 5000;
app.listen(
PORT,
console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`)
);
I have this section in my package.json file
package.json
"scripts": {
"start": "NODE_ENV=production node server",
"dev": "nodemon server"
},
Here is the content of my config.env file
config.env
NODE_ENV=development
PORT=5000
When I run npm run dev everything is fine and runs
When I run npm start to run production, I get the error below.
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
How can I resolve this? I need npm start to run
For Windows:
"scripts": {
"start": "node server.js",
"dev": "set NODE_ENV=DEVELOPMENT && node server",
"prod": "set NODE_ENV=PRODUCTION && node server"
}
For UNIX and other OS:
"scripts": {
"start": "node server.js",
"dev": "export NODE_ENV=DEVELOPMENT && node server",
"prod": "export NODE_ENV=PRODUCTION && node server"
}
By the error message, you are running this in Windows. You need to use Set to setup an environment variable.
"scripts": {
"start": "Set NODE_ENV=production&node server",
"dev": "nodemon server"
}
However, setting up environment variables in this manner is less secure and platform dependent. In other words, any attacker getting access to your server file system can set any environment variable by modifying the package.json. Also, if you decide to move your production to a Linux host later, your start script is going to be broken again.
So, the best practice is to set your environment variables via host configuration setup. Different cloud providers offer different methods for this.
Also, you might not need to use npm to run your script at all. You can call node server directly in your shell.
An easy way to solve this problem:
npm install --save-dev cross-env
"start": "cross-env NODE_ENV=production node server"
This means that you don't have to worry about the platform
for read more: https://www.npmjs.com/package/cross-env
so my webpack has been working fine. I needed a different structure then the default so I placed the webpack files in a build folder. As per documentation I placed the --config option in the package json but I am still not able to access the file in the debugger.
Below is my setup:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build_dev": "node build/build.dev.js",
"build_stg": "node build/build.stg.js",
"build_prod": "node build/build.prod.js",
},
When I run the command node-nightly --inspect ./node_modules/webpack/bin/webpack.js
I get the error:
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
In terms of my file structure I have under the root, a folder named build it contains the webpack config files (I was not sure how the structure is written on SO)
Version usage:
"webpack": "^3.12.0"
node 9.3
--config is a property on webpack. You are trying to set a --config property on webpack-dev-server webpack-dev-server
You can move your devserver to your webpack.config.js file
devServer: {
inline: true,
progress: true
}
and then refer to your webpack.config.js file directly in npm like so:
webpack --config ./build/yourfile.config.js
you can give any name you wish to the config file if you are using --config property else webpack will always try to find webpack.config.js in your projects root directory.
ELSE
you can create a webpack.config.js in your root and switch between config version on runtime like so:
//webpack.config.js
const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'build') {
module.exports = require('./buildScripts/webpack.config.dev');
}
else if (TARGET === 'build:prod') {
module.exports = require('./buildScripts/webpack.config.prod');
}
and in package.json you need the appropriate targets to match npm_lifecycle_event.
//package.json
"scripts": {
"build": "webpack --watch",
"build:prod": "webpack",
}
hi i have a nodejs and reactjs application in my local , developed the application from a boiler plate code , in boiler plate code package.json i have these following scripts
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}
as of i know it can be deployed on heroku with these scripts , can i use same scripts to deploy on azure , do i need to change anything here .
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
and this is what i have in my server.js as a starting point. i don't have any config folder to diff environments.for an example
// i don't have this folder structure and am not using webpack
-- config
|-- dev.json
|-- prod.json
can some one suggest , what is the best way to deploy it , or can i use same post-build script by changing it key like azure-postbuild
edited : i think i should use postinstall instead of heroku-postbuild
I'm using VueCLI 2 and build as production. THe build.js is built and compiled into 200KB. When I re-run the server as development, it loaded 3MB. I'm sure the build.js inside dist folder is 200KB. I tried to open index.html but it doesn't work and redirect to root directory on website.
Package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
Webpack
module.exports = { ...
module:{
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
devtool: '#eval-source-map'
},
...
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: true
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
])
}
HTML
<body>
<script src="/dist/vendor.js"></script>
<script src="/dist/main.js"></script>
</body>
Command
npm run build
npm run dev
npm run build creates a dist directory with a production build of your app.
In order to serve index.html in a browser you need an HTTP server.
For example serve:
npm install -g serve
serve -s dist
The default port is 5000, but can be adjusted using the -l or --listen flags:
serve -s build -l 4000
Docs:
https://create-react-app.dev/docs/deployment#static-server
https://github.com/zeit/serve
https://cli.vuejs.org/guide/deployment.html#previewing-locally
Production build can be run locally by utilizing Vue CLI's tooling simply by running:
vue-cli-service serve --mode production
For convenience, this can be added to package.json scripts:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"production": "vue-cli-service serve --mode production"
}
Command:
$ npm run production
Very easy with express, and highly extensible/configurable.
Install
npm install -D express
Compose
server.js
// optional: allow environment to specify port
const port = process.env.PORT || 8080
// wire up the module
const express = require('express')
// create server instance
const app = express()
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))
Execute
node server.js
The Vue CLI tooling (vue-cli-service serve --mode production) still seemed to be serving the development files for me, albeit with process.env.NODE_ENV === 'production'.
To serve the contents of dist, the following worked for me without having to install any extra packages:
npm run build
npx serve dist
With custom port and SSL key/certificate:
npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem
You can also put this command into your package.json, e.g.
"scripts": {
"serve": "vue-cli-service serve",
"prod": "npx serve dist",
...
}
Then just do:
npm run prod
Build should be deployed to the server, Hence, I don't think that there is any inbuilt way in vue-cli to run build locally.
To run build locally, we need to configure the server separately and run the build on the server as follow,
1) Install lite server via below command
$ npm install -g lite-server
2) Add below scripts in package.json
"lite": "lite-server –port 10001",
"start": "npm run lite"
3) In root directory create bs-config.js file and add below script
module.exports = {
port: 3000,
server: {
baseDir: './dist'
}
}
4) Lastly, Run it via below command
$ npm run start