阿里云部署项目笔记——Vue篇
Notes

阿里云部署项目笔记——Vue篇

Notes

上个月13号弄到了阿里云9.9的学生主机,而且前段时间刚好又完成了练手项目Vue版知乎日报,但是生成的dist文件在Github Pages直接预览会有跨域问题,于是想着能不能使用手上的服务器解决一下这个问题。但是因为种种原因,一直拖着没有去实践,于是趁着清明小长假,花了一点时间折腾了一番,将项目部署至了服务器上,实现了在线预览功能,也了解了在服务器项目部署的大致流程。

前期准备

首先你需要有一台阿里云服务器(9.9学生ECS美滋滋,可惜过几个月就没有了,扎心了!)

付费时选择了Windows系统,可以通过阿里云的控制台在线控制,略卡,然后尝试使用Mac下的远程控制软件操作,不知为何失败,故选择重装CentOSLinux大法好!锻炼动手能力的时候到了),具体步骤自行搜索。

然后在终端使用ssh username@ip命令远程连接服务器,然后输入密码,注意,这里输入密码时终端是看不到的,输完直接回车即可。

至此,在浏览器中输入服务器的公网ip即可访问Nginx默认的页面,服务器已准备好。

生成部署项目文件

在开发环境下,修改config/index.js里的proxyTable,解决跨域问题:

proxyTable: {
  '/api': {
    target: 'http://news-at.zhihu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api/4'
    }
  }
}

组件请求方式:

axios.get('api/news/latest')
  .then(response => {
    // todo    
  })
  .catch(error => {
    console.log(error);
  });

这里设置后请求api/xxx将会代理成http://news-at.zhihu.com/api/4/xxx

注:这里设置这种形式是为了与后面部署的Nginx配置文件相匹配。

然后,执行npm run build生成静态文件夹dist

部署项目至服务器

将前面生成的dist文件夹传输到服务器。我这里使用了scp命令。

然后登录服务器,找到并打开Nginx的配置文件:vi /etc/nginx/nginx.conf

添加新server:

server {
        listen       8888;
        server_name  localhost;
        location / {
            root /usr/local/var/www/zhihu-daily/;
            index index.html;
        }
        location ^~ /api/ {
                proxy_pass http://news-at.zhihu.com/api/4/;
                proxy_set_header Host news-at.zhihu.com;
        }
    }

这样配置完Nginx后即可通过请求http://your_ip/api/xxx的方式请求数据,同时与前面开发环境下的请求模式匹配,部署时只是改变ip与端口号,后面的匹配规则则不需要改变,故无需生产环境无需修改请求代码。

修改后保存,然后执行命令nginx -s reload重启Nginx即可。

然后直接在浏览器中输入服务器的ip+端口号即可预览部署好的项目。至此,部署完成!!!