Linux deployment VUE project

Record the process of deploying a VUE project

1. Install Nginx

Before deploying the VUE project, you must first deploy Nginx and use Nginx for proxy forwarding.

1. Installation tutorial

1. Official website download address: nginx: download

2. Download tutorial:

1) Select the Stable version to download locally (this version is the Linux version). After the download is completed, decompress it locally and put it into the Linux system.

2) Use the command to download in the linux environment:

Before downloading:

(1) Install dependency packages: yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 

(2) Create a storage directory and download and decompress the installation package:

  Change directory: cd /usr/local

  Create a new folder: mkdir nginx

  Switch to the nginx directory: cd nginx

Download nginx installation package:

   wget http://nginx.org/download/nginx-1.22.0.tar.gz

   tar -xvf nginx-1.22.0.tar.gz

3. After the download is complete, install Nginx:

Switch to the newly created nginx directory: cd /usr/local/nginx

Enter the nginx directory: cd nginx-1.22.0

Execute the make command: make

Execute the installation command: make install

Check whether the installation is successful: ps -ef | grep nginx (check whether there is an nginx process)

If the installation is successful, the nginx process will appear:

 4. After the installation is successful, start the Nginx service: Go to the /usr/local/nginx/sbin directory and start the service: ./nginx -c /usr/local/nginx/conf/nginx.conf

5. After successful startup, check the process again:

2. Tutorial on deploying Nginx in Linux environment

1. Configure the nginx.conf file:

   1) Open the configuration file: vi /usr/local/nginx/conf/nginx.conf

   Note: If root has a file directory, write the file directory (for example: /data/apps/html/frontend), if not, use the default html

   2) Or pull down the nginx.conf file, modify it locally and then upload it

2. Package yourself and upload the dist file

3. Restart nginx: ./nginx -c /usr/local/nginx/conf/nginx.conf

      Check again whether nginx is started: ps -ef | grep nginx 

Seeing that nginx is starting indicates success.

 

4. You can see the interface after restarting

2. Package VUE project

Baidu, there are many, so I won’t explain them here. Just execute npm run build and it will generate the dist file. Just package this folder and throw it to the deployment personnel.

3. Throw the packet on the linux server

Generally, just use winscp or xftp.

4. Configure Nginx

This is an important point. I have stepped on it many times.

1. First go to the conf folder of Nginx and find the nginx.cnf file. 

2. Then you can use the command or xftp to change

vi ngnix.conf

Find the server label

server {
	# 代理的端口
        listen       端口号;
        server_name  IP地址;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        # 默认所有路径
        location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE_HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
	    proxy_set_header X-NginX-Proxy true;
			
            # 反向代理配置
            proxy_pass http://xxxx:xxx/;
        }

        location / {
	    # 修改为vue项目所在地址即可
            root   /home/xx/xx;
            index  index.html index.htm;
	    try_files $uri $uri/ @router;

        }

 listen: represents the port of the proxy, that is, the access port

server_name: IP that needs proxy

localhost: /api/ This points to the address of the backend deployment. If you reverse proxy the backend, otherwise the web page cannot call the interface.

proxy_pass: backend address of the reverse proxy

The location below is the address of the agent’s VUE project.

Save and then restart Nginx.

Go to the sbin directory of nginx

Just execute ./nginx or ./nginx -s reload.

Of course, other problems may arise in the middle. For example: after installing nginx, there is no sbin directory and no logs folder. Execute systemctl start nginx and it will show that the command cannot be found. Just click CSDN.