The background,
As a front-end newbie for less than a year, how does the project feel from development to deployment? My biggest feeling is: it’s so fucking painful, I’ve finished the pot.
Although there are many POTS to recite, but learn things is really much, today I will talk about nuxt.js development and deployment with PM2 nuxt.js process encountered those pits.
Process. env in nuxt.js
1. You can use the env variable in a JS environment
It is important to note that we cannot write env variables directly into the view, as that would cause parsing to fail (no one would do that!).
The packaged env variable will be static data
Why emphasize this point?
When a project is refined through iterations of smaller releases, there must be a distinction between development deployment and production deployment. Since we’re using env, we definitely want to be able to set things up dynamically. For example, we want to dynamically show what kind of deployment environment we’re in:
At the beginning of this article we talked about deploying nuxt.js using Pm2, which supports env injection. So why not just configure it in PM2, you might wonder? The title already tells you the answer.
When env variables are packaged as static data, the immediate result is that nuxt.js uses the default Settings no matter how you configure them in PM2.
Pm2 env: pm2. Keymetrics. IO/docs/usage /…
So how do you verify this? See the picture below:
Deployment of pm2
Simple nuxt.js deployment
The expected result of this deployment was “8001 production Service”, but the actual situation was completely different from the expected result. This deployment also verifies that the packaged env variable will be static data.
2. Nuxt.js packaging and deployment in different environments (dynamic deployment)
In order to solve the above problem, what I can think of so far is to do some work on the package, we just need to pass in the env argument in the package command.
Then we package, deploy and access them respectively according to the diagram. The results are as follows:
3. Configure axiOS cross-domain proxy in dynamic deployment
Novice front-end users (like me) are left to “beg” the back-end gods when they encounter cross-domain problems. However, god said this is not his problem, can not only hard scalp, and then a burst of Baidu fierce as tiger, a look at the record: 0-5. Do you have a strong sense of deja vu?
Nuxt.js has a supporting axios library, @nuxtjs/axios. We only need to configure nuxt.config.js, as shown in the following figure:
- @nuxtjs/axios proxy
- Summary of Cross-domain CORS
- Look at things that cross domains from different angles
added
1. Use Nginx reverse proxy pM2 service
Even if we use PM2 to deploy the nuxt.js program, we can not access on the public network, so what to do? Please baidu “Nginx reverse proxy PM2”, because the author of Nginx even simple will not be used, it is not here.
2, nuxt.js official pM2 and Nginx usage documentation
- Deploy Nuxt using PM2
- Using NGINX as a reverse proxy
3. Pm2 can also be configured in this way
In the example above, our pM2 configuration is centralized in the file.config.js file. If you want to start the PM2 service by specifying a configuration file, you will find that executing pm2 start ecosystem.*.js is not what you expected.
For this purpose, instead of writing the configuration in a.js file, we write it in a.json file, such as:
