通过阿贝云免费云服务器部署vue3+vite项目

通过阿贝云免费云服务器部署vue3+vite项目

阿贝云：https://www.abeiyun.com

首先访问阿贝云登录后申请服务器，需要关注微信公众号绑定

然后我们给服务器安装操作系统，这里我使用了centos7.6

这里我使用finalshell 连接服务器

我们首先配置nginx

安装所需环境

Nginx 是 C语言 开发，建议在 Linux 上运行，当然，也可以安装 Windows 版本，本篇则使用 CentOS 7 作为安装环境。

一. gcc 安装
安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：

yum -y install gcc-c++

二. PCRE pcre-devel 安装
PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令：

yum install -y pcre pcre-devel

三. zlib 安装
zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。

yum install -y zlib zlib-devel

四. OpenSSL 安装
OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。

yum install -y openssl openssl-devel

我们首先访问nginx的下载地址，下载nginx-1.18.0.tar.gz

nginx: download

然后进入服务器的home   cd  /home

把nginx的压缩包拖进去

tar -xvf nginx-1.18.0.tar.gz    解压安装包

cd nginx-1.18.0   进入到nginx目录

1.使用默认配置

./configure    运行configure配置文件

make   编译

make install     编译后安装

查找安装路径：

whereis nginx    查看nginx装到哪儿去了

cd /usr/local/nginx

conf 目录: nginx软件的配置文件所在目录

html 目录：nginx默认代理的网页所在目录

logs目录：nginx软件运行时产生的日志文件所在目录

sbin目录：nginx软件启动命令所在目录

cd sbin

# 执行nginx命令, 就是启动nginx这个软件

./nginx

# 测试nginx软件是否启动成功, 测试之前先关闭服务器防火墙

systemctl stop firewalld

在浏览器中输入服务器的IP地址

启动、停止nginx

cd /usr/local/nginx/sbin/    进入到nginx安装目录下的sbi目录   

./nginx    启动nginx

./nginx -s stop   停止nginx

./nginx -s quit    退出nginx

./nginx -s reload  重启nginx

./nginx -s quit:此方式停止步骤是待nginx进程处理任务完毕进行停止。
./nginx -s stop:此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

查询nginx进程：

ps aux|grep nginx

开机自启动

即在rc.local增加启动代码就可以了。

vi /etc/rc.local

增加一行 /usr/local/nginx/sbin/nginx
设置执行权限：

chmod 755 /etc/rc.local

重启试一下

reboot

到这里，nginx就安装完毕了，启动、停止、重启操作也都完成了，当然，你也可以添加为系统服务，我这里就不在演示了。

在vue项目   npm run build   我们获得了一个dist文件夹

把这个拖到nginx的  /usr/local/nginx/html  

cd /usr/local/nginx/html

修改配置文件

cd /usr/local/nginx/conf

找到nginx.conf

修改 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/    进入到nginx安装目录下的sbi目录

./nginx -s reload  重启nginx

可以访问了