通过nginx配置将vue项目运行到阿里云linux服务器上

news2024/11/30 12:48:22

先将我们的vue项目打包起来
在这里插入图片描述
打包好之后我们在项目根目录下找到 dist 下的 index.html
保证这个文件要能正常运行

然后我们将这个dist文件夹压缩一下

然后回到项目终端

执行

scp -r ./dist.zip 用户名(如果之前没设置过就是 root)@服务器公网地址:/root

然后他会要求我们输入密码
输入完之后就会这样
在这里插入图片描述
输出文件名说明我们的文件已经到服务器上去了
我们来到服务器

输入 ll
在这里插入图片描述
这是第二个看到就是我们的文件了
我们将他解压出来
在服务器上输入 pwd

这样我们就到了 root操作目录下了

然后我们输入

unzip dist.zip

在这里插入图片描述
完成之后我们再次输入 ll

可以看到我们的 zip文件就已经被解压出来了

然后我们将这个zip干掉省点内存

输入

sudo rm -r dist.zip

然后再次输入 ll
在这里插入图片描述
然后我们需要一个 nginx的配置文件 nginx.conf 编写内容如下

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen 80;
        server_name localhost;
        location / {
            root /root/dist;
            index index.html;
        }
    }
}

然后我们需要确认一下服务器上有没有nginx
在服务器上输入

nginx -v

如果返回的结果为 -bash: nginx: command not found 说明没有
我们就要先输入指令安装nginx

sudo yum install nginx

在这里插入图片描述
走到这里我们输入y
然后 nginx就起来了
然后我们再次输入

nginx -v

下面输出版本信息说明安装成功
在这里插入图片描述
然后回到我们自己的电脑
将 nginx.conf 放到项目目录下或者你找到 nginx.conf 的所在目录
在终端输入命令将nginx.conf也放到服务器上去

scp nginx.conf 用户名(如果之前没设置过就是@服务器公网地址:/etc/nginx/

在这里插入图片描述
这样我们的配置文件就上去了

然后我们来到服务器输入

sudo systemctl reload nginx

然后输入

sudo systemctl reload nginx

重启nginx服务
如果报错了 Job for nginx.service invalid.
那就 sudo nginx -t
应该会输出 nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

然后我们输入