vue开发和nginx部署备忘笔记

6个月前更新

本文是记录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收集和整理

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

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

参考

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

来源链接：https://www.cnblogs.com/zhang-yd/p/18666412

评分

欢迎为Ta评分