Vue项目上线(阿里云centos7+nginx)

比眉伴天荒 2022-05-21 10:58 237阅读 0赞

## 由来 ##

自己原来做的一个网易云音乐的项目最近想把它上线，而且服务器也买了好久，因为一直没有学习Linux知识就一直搁置着，近来暑假快到了就想着捣鼓一下，[项目github地址][github],[上线地址][Link 1]，阿里云备案也太麻烦了吧:)，还有就是感谢大佬的[网易云API][API]

## 步骤 ##

1.  首先当然是阿里云服务器购买以及Vue项目的编写了，服务器购买就不说了，Vue项目打包`npm run dev`的时候要注意一下，主要是`config/index.js`里`assetsPublicPath`要配置成 `'./'`(原来是`'/'`),不然在上线后会什么也没有，还有就是如果使用了`axios`跨域(跨端口)的话，并且是使用proxyTable配置如下的话:

proxyTable: {
        '/api': {
            target: 'localhost:3000',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
    // 主要主要是把localost:8080/api/songs(Vue默认监听8080端口),转发到localhost:3000/songs

那么需要配置一下nginx,这个是重点，待会讲  
2. 购买好服务器后，就是在Linux里输命令了,关于远程连接工具以及文件上传工具我分别使用的Putty和Xftp,具体使用方法就不赘述了，下面就直接上代码了,Linux使用的是(阿里云centos7)

# yum -y install epel-release
    安装EPEL源
    
    # yum install nginx
    安装好nginx
    
    # yum install nodejs
    安装node
    
    # yum install pm2
    用于永久运行node应用，用于提供api服务
    
    # vi /etc/nginx/nginx.conf
    更改nginx配置,主要更改server配置
    server {
        ...省略代码
        root        /var/www/vuemusic;
        // 代码(npm run build之后dist文件夹里的文件,不要直接传dist文件夹)通过Xftp上传到/var/www/vuemusic目录下
        location / {
            root /var/www/vuemusic;
            index index.html;
        }
    
        location /api {
            rewrite ^.+api/?(.*)$ /$1 break;
            proxy_pass http://39.107.127.240:3000;
            // 作用和proxyTable差不多
        }
    }
    
    # nginx -s reload
    重启nginx,如果提示不存在该进程,则使用命令# niginx -c /etc/nginx/nginx.conf
    
    # cd /var/www/api
    把上面的文件通过git下载到windows,通过Xftp传到/var/www目录下,在把名字改成api,进入这个文件
    
    # npm install
    安装这个node服务器的依赖
    
    # pm2 start app.js --name='api'
    启动node服务器，并命名为api
    
    # pm2 list
    查看node应用是否启动

1.  在浏览器输入ip地址就可以直接看到项目了

## 后期 ##

虽然这个项目已经布置好了，但还是比较简陋，没有配置数据库（这个项目不需要，算是一个纯前端的项目），还有就是要想办法把这个项目放到二级路由下，不然一个服务器跑这么一个应用岂不是很亏:),后期还是的多学学linux以及nginx

[github]: https://github.com/Ctum/VueMusic
[Link 1]: http://39.107.127.240
[API]: https://github.com/Binaryify/NeteaseCloudMusicApi