vue开发和nginx部署备忘笔记

 

本文是记录vue+nginx开发过程中的遇到的一切问题，持续更新。

 

 

 

 

 

 

 

一，将vue项目部署到nginx上

在云服务器上安装好了nginx后，使用 命令 nginx -v 来查看版本以确定软件安装成功。

（1）本地进行打包操作，在vue项目的根目录进行如下操作 ，打包之前需要关注根目录下的 .env.development 和 .env.production 的配置信息

npm install      # 依赖库的更新
npm run          # 这个命令不全，会提示出本项目支持打包的版本 
npm run build:prod      # 针对生产环境进行打包

（2）经过上面打包操作，在根目录下会生成一个 dist 文件夹，里面含有的就是打包好的文件 ，使用scp把它拷贝到云服务器上。

scp -r dist ubuntu@10X.XX.XX.XX:/home/ubuntu/nginx/

（3）在云服务器上进行部署

sudo service nginx         # 看看nginx支持的命令有什么
sudo service nginx stop          # 关闭当前的nginx服务

# 修改nginx的配置文件
sudo vim /etc/nginx/nginx.conf

# 以下是部分的文件内容，需要更改user 为当前登录的用户名，同时在http里面配置当前业务的配置文件

#user www-data;
user ubuntu;

http {
    ##
    # Basic Settings
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;

    # 这里导入业务的配置文件
    include /home/ubuntu/nginx/bs_server.host; # bs server config file
}

需要针对自己的业务进行配置，配置文件在 /home/ubuntu/nginx/bs_server.host 

server {
        listen 8090;
        server_name bs_server;
        location /{
                autoindex on;
                root /home/ubuntu/nginx/dist;
                index index.html;
        }
        error_page 500 502 503 504 /50x.html;
}

从上面的配置信息可以看出，监听的port是8090这个端口，一个简单的配置。

最后 sudo service nginx restart 就可以重启nginx了

然后浏览器输入的  10X.XX.XX.XX:8090 就可以访问vue服务了。

 

（4）遇到的一些bug收集和整理

（4.1）如果在浏览器显示 403 Forbidden nginx/1.18.0 (Ubuntu)，应该是权限问题

通过 tail -f /var/log/nginx/error.log 查看nginx的错误日志可以看出，chmod -R 777 dist/  把dist下的所有文件的权限给所有用户。同时在nginx.conf 的user的配置。

（4.2）如果在restart或者start的时候，报错，其中有[emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)，因为98这个错误号一般是对应的端口被占用了

可以使用 “sudo netstat -tulnp | grep :80” 来查看 80 这个端口被哪个进程给占用了。（列出其中的PID和运行命令）

 （4.3）有一个疑问，待解决。

sudo service nginx status 这个命令是会输出log来看其中有多个task，但跟下面的进程又是不相关的

netstat -natp | grep nginx 这个命令是会从操作系统层面输出当前系统有多少个关于nginx的进程

 

（5）域名的解析

比如申请到了一个域名 test.com, 进行备案之后便可以对外服务了。

一般设置二级域名来解析到不同的服务上，比如 admin.test.com 可以解析到本地的vue项目，而 index.test.com 可以解析到本地的web服务中。

server {
    listen 80;
    server_name blog.test.com;
    location / {
        autoindex on;
        root /home/ubuntu/nginx/dist;
        index index.html;
    }
}

server {
    listen 80;
    server_name news.test.com;
    location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

　　

 （6）SSL的部署

可以申请腾讯云上免费的，但是每个只有三个月的时间可用，过期了需要重新申请。

免费的是单域名证书，只能用在一个单一的子域名上。下载对应的证书文件，并将证书文件scp到/etc/nginx/ssl上 

然后重新修改 nginx.conf 配置文件，如下是一个简单的例子。

server {
    listen 80;
    server_name your_domain_or_ip;
    return 301 https://$server_name$request_uri;  # 将 HTTP 请求重定向到 HTTPS
}

server {
    listen 443 ssl;
    server_name your_domain_or_ip;

    ssl_certificate /etc/nginx/ssl/cert.crt;  # SSL 证书文件路径
    ssl_certificate_key /etc/nginx/ssl/cert.key;  # SSL 私钥文件路径

    root /path/to/your/vue-project/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

　　

（7）错误收集

 

 

参考

https://blog.csdn.net/m0_62262778/article/details/137401867