I have built Web application using Laravel As API and Nuxt As Front and. These 2 built desperately. When the development ongoing Its isn't an issue. Because i can run them using their own development servers. Then i have bought a VPS server for host this. Now the question in how i deploy these two apps on my VPS. Specially How i can deploy nuxt app correctly in vps. Its not static side. It is ssr app.
Essentially, you are going to need a few things:
A server (which you already have)
nginx
PM2
Node/NPM installed
The tricky part of this, is to make sure the server continues running and auto-restarts in case of a crash. PM2 solves that issue, and you can read more information on how to use it here: https://nuxtjs.org/docs/2.x/deployment/deployment-pm2
You can install it by:
npm install -g pm2
Which will install PM2 globally on your server and you'll have access to the pm2 command.
Follow the documentation above, and all you gotta do is run:
pm2 start all
This will start the Nuxt service and it will run on whichever port you've defined on your nuxt.config.js or package.json files.
Now that you've got your Nuxt instance running, you need to make sure that requests that come through the browser end up on the port that Nuxt is running on, that's achievable by using nginx's reverse proxy feature that you can read more about:
https://nuxtjs.org/docs/2.x/deployment/nginx-proxy/
That documentation provides you with an example of an nginx config file, and you shouldn't really have to change anything other than the server_name, and the proxy_pass in case you've changed the default Nuxt port from 3000 to something else.
Additionally make sure that you have allowed port 80 to be listen on your server.
Related
I am trying to containerize my React application with docker and am now a little bit stuck with the server.js file as I do not know how to "implement" the application inside. I was able to simply show a "Hello World" but can't seem to run the application inside.
My idea was initially, that I could just use the index.js file as an entrypoint and use it in the "res.end(x)" as this was the place where I could simply enter the "Hello World".
Am I missing just something small or is my general approach wrong?
My server.js file looks as followed:
const http= require('http');
const fs = require('fs');
const index = fs.readFileSync('index.js');
let app = http.createServer((req, res) => {
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(index);
});
app.listen(9030, '0.0.0.0');
console.log('Node server running on port 9030')
I share with you this best documentation :
https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
React is generally coded in .jsx files, which need to be compiled/transpiled into regular Javascript. Once this is done, you can serve these files to web browsers any way you like.
Understanding Build tools
React compilation/transpilation is done using Webpack or Parcel. If you're using Create-React-App, then you're using Webpack under the hood. CRA npm start will run a Webpack dev server, and npm run build will put all of the files you need in your build directory. You should do the latter if you want to
Avoid using Webpack dev server
Most tutorials, including the one linked in the comments, suggest using Webpack development server (aka npm start) to run your server in Docker. which is not recommended. Not only does it consume more resources to run, but the development build will run slower in browsers than the production build. The development server is also not meant to handle heavy loads.
Use build for production, with a real server
Use npm run build to generate the build files in the build directory, then use a real web server to serve them to the world.
One example in Docker, using Nginx to serve the files, can be found here
Alternatively the CRA build command itself offers a helpful hint:
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
This will work in a Docker Node container. An example of a very not-optimized Dockerfile might look like this
FROM node:16-alpine
COPY . .
RUN npm install
RUN npm build
RUN npm install -D serve
CMD ["./node_modules/.bin/serve", "-s", "build"]
The build process can be improved here to leverage cache (by first copying package.json and package-lock.json and installing before copying code over, see example at the end of the answer here), and all of the RUN commands combined
I'm trying to deploy this repo
https://github.com/stepseazy/checkers/
to this website
https://stepseazy.github.io/checkers
However, I'm getting 404 errors. I also tried heroku. It does work when I serve the build locally. Not sure what's wrong. Please help!!!
You'll have to distinguish your dev environment and your production one. On dev mode, you run npm start that does things (as instructed in package.json) and act as a local server and serves you project on http://localhost:3000. You simply cannot use that in production mode on Github or Heroku.
You need to deploy the built version, running npm run build. It will create a javascript file in a dist folder. You might want, on Github, create a gh-pages branch, build this production ready file on it, create an index.html file that serves it, and commit that.
I'm no expert on Heroku but it might be a slightly similar case (run post-deploy scripts that build your app and serve it through an index.html file).
Hope that help.
I'm working with a create-react-app generated app which I'm deploying to Heroku. I would like to test out the production version npm run build in an actual server.
Is it possible to serve the build version instead of the development version to heroku? It's okay if I can no longer have the dev version up in that heroku instance.
If possible, how can I do so, I have been searching up and nothing comes up
If you're following standard documentation on how to deploy react app to heroku, you're already running the production build on heroku.
That documentation uses create-react-app-buildback for deployment and serving the app via Nginx. You can refer to this section that explains that the app is served from build directory
There is a way to verify this too. If you have react developer tools extension installed on your browser, it shows if the app is running production version or development version.
I have a situation where, for the last 4 months, I've been running deployments via Codeship to MediaTemple Wordpress Managed Hosting for 10 different sites.
Then, out of no where, I started receiving this error for all deployments:
ssh_exchange_identification: read: Connection reset by peer
In troublehsooting, I hit a brick wall from MediaTemple as they want to run a traceroute from Codeship to hit the MediaTemple hosting server before they'll look into anything else. Only problem is, traceroute is not installed on Codeship. Neither is MTR.
My deployment is extremely basic. Runs with GIT over SSH.
git config --global user.name "username"
git config --global user.email user#email.com
git remote add production user#server.name:reponame.git
git push production master
I'm looking for any way to run a traceroute equivalent via node or Javascript. I've been a few npm wrappers for traceroute, but if native traceroute is a dependency, that doesn't do me any good.
There is a Node script called sloppy traceroute clone by Liam Griffiths. I haven't used it myself but it is supposed to do what traceroute does but all in JavaScript.
It needs raw-socket and dns modules from npm.
Keep in mind that it may still not work on Codeship due to permissions and network configuration.
I downloaded the source code from getbootstrap.com and ran npm install, then grunt connect without any luck.
I see this in my terminal:
Running "connect:server" (connect) task
Started connect web server on 0.0.0.0:3000
But when I navigate over, all I see is this:
What have I missed? I feel I've missed something basic here but unsure why I'm not seeing anything at all?
In the Internet Protocol version 4 the address 0.0.0.0 is a non-routable meta-address used to designate an invalid, unknown or non applicable target.
Unfortunately,bootstrap doc is not build in grunt, you need to install Jekyll to run the web local.so you need install ruby first,and install gem second,then install jekyll,finally,use
jekyll serve
to run the local server.
watch the guide