Deploy vue3+vite project through Abeiyun free cloud server

Abeiyun:https://www.abeiyun.com

First, visit Abei Cloud to log in and apply for a server. You need to pay attention to the WeChat official account binding.

Then we install the operating system on the server. Here I use centos7.6

Here I use finalshell to connect to the server

We first configure nginx

Install the required environment

Nginx is developed in C language. It is recommended to run on Linux. Of course, you can also install the Windows version. This article uses CentOS 7 as the Installation Environment.

1. gcc installation
To install nginx, you need to compile the source code downloaded from the official website first. The compilation depends on the gcc environment. If there is no gcc environment, you need to install:

yum -y install gcc-c++

2. PCRE pcre-devel installation
PCRE (Perl Compatible Regular Expressions) is a Perl library, including a perl-compatible regular expression library. The http module of nginx uses pcre to parse regular expressions, so the pcre library needs to be installed on Linux. pcre-devel is a secondary development library developed using pcre. nginx also requires this library. Command:

yum install -y pcre pcre-devel

3. zlib installation
The zlib library provides many compression and decompression methods. nginx uses zlib to gzip the contents of the http package, so the zlib library needs to be installed on Centos.

yum install -y zlib zlib-devel

4. OpenSSL installation
OpenSSL is a powerful Secure Sockets Layer cryptographic library, including major cryptographic algorithms, commonly used key and certificate encapsulation management functions, and SSL protocols. And provides rich applications for testing or other purposes.
nginx not only supports the http protocol, but also supports https (that is, transmitting http over the ssl protocol), so the OpenSSL library needs to be installed on Centos.

yum install -y openssl openssl-devel

We first visit the download address of nginx and downloadnginx-1.18.0.tar.gz

nginx: download

Then enter the server's home cd /home

Drag the nginx compressed package into it

tar -xvf nginx-1.18.0.tar.gz Extract the installation package

cd nginx-1.18.0 Introducing nginx directory

1. Use default configuration

./configure operation configurearrangement statement

make edit

make install Compile and install

Find the installation path:

whereis nginx Check where nginx is installed

cd /usr/local/nginx

conf Directory: The directory where the nginx software configuration file is located

html Directory: The directory where the nginx default proxy web page is located

logs directory: The directory where the log files generated when the nginx software is running are located.

sbin directory: the directory where the nginx software startup command is located

cd sbin

# Execute the nginx command, start the nginx software

./nginx

# Test whether the nginx software starts successfully, Close the server firewall before testing

systemctl stop firewalld

Enter the server’s IP address into your browser

Start and stop nginx

cd /usr/local/nginx/sbin/ Enter the sbi directory under the nginx installation directory

./nginx 启动nginx

./nginx -s stop 停止nginx

./nginx -s quit 退出nginx

./nginx -s reload 重启nginx

./nginx -s quit: The stop step in this method is to wait until the nginx process completes the task.
./nginx -s stop: This method is equivalent to first finding out the nginx process ID and then using the kill command to forcefully kill the process.

Query nginx process:

ps aux|grep nginx

Start automatically at boot

Just add the startup code inrc.local.

vi /etc/rc.local

Add a line /usr/local/nginx/sbin/nginx
Set execution permissions:

chmod 755 /etc/rc.local

Try restarting

reboot

At this point, nginx is installed, and the start, stop, and restart operations are also completed. Of course, you can also add it as a system service, but I will not demonstrate it here.

In the vue project npm run build we obtained a dist folder

Drag this to nginx /usr/local/nginx/html

cd /usr/local/nginx/html

Modify configuration file

cd /usr/local/nginx/conf

Find nginx.conf

Modify server

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            root   /usr/local/nginx/html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /gpp/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            #rewrite ^/api/(.*)$ /$1 break;  #重写
            proxy_pass http://127.0.0.1:9992/; # 设置后端服务器的协议和地址
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

cd /usr/local/nginx/sbin/ Enter the sbi directory under the nginx installation directory

./nginx -s reload 重启nginx

Can be accessed

Deploy vue3+vite project through Abeiyun free cloud server

Guess you like