nuxt.js items uploaded to deploy server (ubuntu + nginx + node + pm2)

The whole chapter comparing long-winded, you can choose where appropriate, be helpful to look at themselves.

1. Purchase a server

Have their own server can skip Kazakhstan.

There are, then you can leave your computer, you can specifically look for yourself, and I say this mainly online cloud servers.

But these days there is Ali cloud activity, students free of charge to six months ECS server , provided that they had no ECS server, if the original has a lightweight application server, then it can also re-neck (just expired without renewal ha ha ha),

Activity URL: https: //developer.aliyun.com/adc/student/

If not, then the student can only buy their own, and buy it basically fool, not explained. You can buy their own from anywhere.

Ali cloud ECS server purchase: https: //www.aliyun.com/product/ecs

The system then Benpian is Ubuntu 16.04.6, centos also, are very much the same Linux. But if you are a beginner, the best and I'm using the same, because the difference because of different distributions resulting from failure may lead to run something, looking for a long time to find the problem. windows server is not recommended, companies with multiple small servers running windows server more strenuous.

Specific differences: https: //www.linuxprobe.com/ubuntu-comparison-centos.html

1.1 Purchase domain name

The domain can buy, that is easy to remember your URL, there is no real use.

I chose million net address to you, pick yourself watching, anyway, is not expensive.

Million net: https: //wanwang.aliyun.com/

Ali also, so and Ali cloud host configuration is relatively easy point. Well, the website will purchase your DNS domain name resolution of your binding domain corresponding server ip can be realized enter the domain name docking ip.

dns DNS service: https: //dns.console.aliyun.com/

2. Server Configuration

2.1 connection to the server

First, if you buy a cloud server, then Bahrain system, it needs to connect with the local machine.

First open your cmd terminal or the like, connected to the server using ssh your command.

$ ssh [email protected]

123.123.123.123Is your public network server Ip, how to find it?

Ali cloud, for example the first landing, and then find the console, if you used the ECS server before then, under your recently used products have a 云服务ECSlabel, click on it you can see your cloud server instance. In the ip address bar had his private network and public network ip Ip up.

Then someone will ask, and public and private network ip Ip What difference does it make? In general that if you access a host through the Internet, can only use the public network ip, private network can only be used within a LAN.

Wait a moment to let you enter the password, you directly enter the password server configuration time, when the input does not show what you entered is no movement on the surface, so you just entered on the line, finished Enter input , you can enter the server

2.2 ssh settings

Of course, you can choose to create a new user, and then directly with the user login ( ssh 你的用户@公网ipprior to login as root server because now there is only the root user), it may be related to some security issues, but not as a personal server set up also, so I do not describe .

If there is a need to look at the security comrades of thing I read blog Ruan Yifeng

:http://www.ruanyifeng.com/blog/2014/03/server_setup.html

But every time a password is really very troublesome, so you can use SSH keys to avoid landing, described here only mac system, windows do not quite understand. If you took the trouble at the same time there is no requirement for safety as if this step can be ignored.

First, you can enter this terminal in ssh-keygenorder to generate public and private keys
```
$ ssh-keygen -C "你想在这输什么都行，这就是一段描述，一般套路是你的邮箱" 
```
If you do not like it you can not even add -C, you look at the other tutorials -t rsa can not add, because without also generate rsa format.
Let you enter a file name, this step can not enter, then the default file name is not input id_rsaandid_rsa.pub
Let you enter a password, the same can not enter.
Next you will see your user directory will appear in .sshthe folder (hidden by default, and need to command + shift + period key can show), then you will see this folder there id_rsaandid_rsa.pub
Login server, and then create a .ssh in your user directory folder, then create a new authorized_keysdocument, you are now the default root user.
```
$ cd /root
$ mkdir .ssh
$ vim authorized_keys
```
Then enter the vim interface, remember your id_rsa.pub it? In the local host, you just turn on what he (for example sublime), the contents of this file to copy and paste it into vim server, and then ah ESC key to exit edit mode, and then in uppercase ZZ can save and exit the file, or you You can also enter :wqto save and exit the file.

Speak more popular, you can also use ssh-copy-id, or cat ~/.ssh/id_rsa.pub | ssh [email protected] 'mkdir -p .ssh && cat - >> ~/.ssh/authorized_keys'so it looks more high-end action to perform, but I guess I do not look at this blog I will be used.

Then, restart the SSHD.

$ sudo service ssh restart
或者
$ sudo /etc/init.d/ssh restart

Then quit your server, input exitor logoutor directly close the terminal can be.
Then ssh command and then log on to your server, you will find not lose your password.

2.3 Configuration Environment

Installed with apt-get install commonly used tools, concrete do not explain, you can choose to install, want to learn more can look at Baidu below are some what.

$ sudo apt-get install vim openssl build-essential libssl-dev wget curl git

Next, use wget installed nvm, nvm node.js is a node version management tool, you can either install or switch to switch to the

nvm ls-remote: Lists all node version numbers can be installed
nvm install v12.16.1: Install specify the version number of the node
nvm use v12.16.1: switching node version, this is global
nvm current: the current node version
nvm ls: Lists all node version has been installed

So you can first use nvm ls-remoteto check for the latest version, it is recommended to install the latest LTS version, then use nvm install v12.16.1to install, because the use of foreign networks, downloading may be some slow, need to be patient.
Then you can use the familiar npm install a variety of tools, and directly in accordance with the following installed just fine.
```
$ npm i pm2 webpack vue-cli -g
```
The next step is to install nginx
```
$ sudo apt-get install nginx 
```
ngnix hell is to be will say it again, you first install your.
If your project consists of back-end code, then packed the database service requires mongdb, redis mysql or the like, you can go to Baidu itself. Not repeat them here.

3.nginx Configuration

3.1 Description of principle

Nginx briefly principle, if you access your public Ip directly through the browser or the domain name, it will not be anything, because things are not what you put up.

If you put a vue project, running on the server, you know if the project runs on a local, you can 127.0.0.1:3000 or localhost: 3000 to access your project.

But if you project onto the server running, I do how to access the server via this address 127.0.0.1? The answer is no, because this is a loopback ip address, can only refer to the machine, but the machine is not running this project.

So how do I access the items on the server? So nginx came, he can reverse proxy, will 123.123.123.123:80 address you entered 127.0.0.1:3000 he directed the machine is running. So you only need to enter 123.123.123.123 in your browser, then you will be just running on the server vue project.

3.2 Configuration start

We enter /etc/nginx/sites-enabled/in with vim editor defaultfile

$ cd /etc/nginx/sites-enabled/
$ vim default

Then you take you can see without the # sign comments are deleted and replaced with the following me something, then you can execute your default code 3000 port, and a lot of other configuration options, I can only give you the code is simple to run Kazakhstan, consult the documentation or other self see other blog, I will not start up.

nginx Chinese document: https: //www.nginx.cn/doc/

upstream nuxt{
        server localhost:3000;

}
server {
        listen 80;
        server_name _;

       location / {
            proxy_pass http://nuxt;
        }
    }

And then perform sudo nginx -tto see if syntax or configuration whether flawed, and if successful show, then it is executed sudo nginx -s reloadto restart nginx service. The easiest such agents get away.

4. Run the project package upload

4.1 package upload

First, if your nuxt.js project includes a back end, then, and address your request is similar to this.$axios.post("/message/upload",{})the case, first axios.js look at the plugin directory configuration, ensure that the address when running on the server sent correct.

export default function({ $axios, redirect }) {
  $axios.setBaseURL("http://公网ip");
}

And to ensure that there are marked on nuxt.config.js use this pulgin

module.exports ={
  
  // ...
  
  plugins: ["@/plugins/element-ui", "@/plugins/axios"]
  
  // ...
  
}

Then we run npm run buildthen will automatically give us packed the corresponding file, we need to be copied to the server

.nuxt
package-lock.json // 如果有的话
package.json
nuxt.config.json
static
server // 如果你的项目中有后端的话

Then it stands to reason that they will be copied into the server /www/项目名folder

Copying step may be operated by such client side forklift or sftp, lrzsz command.

I do not go into details, to a blog on their own research

Three ways Linux file uploading and downloading: https: //blog.csdn.net/weixin_37490221/article/details/80844825

My method of operation is to directly download a forklift, then command+kcome with the server sftp link, drag and pull on the line. More convenient.

Then we have just entered the new server /www/项目名, perform the npm installinstallation can rely on. Then we will wait to start the project.

4.2 pm2 daemon

Server Well, of course, has been running, what if the occasional crash of a process running on it interrupted, so the need for such a program to pm2 daemon you performed, if you encounter a crash can automatically restart again. Multi-process and start the case again this stuff can not configure, run injection mongdb, redis and your web application.

Just when re-configuration environment has been installed pm2, we have just entered our new server /www/项目名, execute

$ pm2 start npm --name "my-nuxt" -- run start

Attached some common pm2 operation

View has been used to start the process:

$ pm2 list

One restart process:

$ pm2 restart XXX

Stop one process:

$ pm2 stop XXX

Delete one process:

$ pm2 delete XXX

Then we can happily open a browser to access our site.