项目上线的一些基础问题：Vue服务器部署，Nginx配置，linux命令，跨域问题……

 

 

今天有前端的代码需要部署到服务器上，自己实在是太菜了，中间遇到许多问题，不过最终暂时成功，有点乱，这里做个小结。

本文将以遇到问题，及如何解决的形式展开，仅为个人浅薄理解。

项目采用烂小街的前后端分离Vue+Springboot

1.什么是前端部署？

笔者对前端的理解不深，甚至可以说完全不懂前端。项目团队中前端的同学把编译好的vue代码给我时，我开始觉得很简单——不就是把代码塞到后端里么，然后后端部署到服务器上。

不过有这么一个念头（一行代码）在我脑中闪过

npm run server

前端要运行起来呀，我难道需要在服务器上安装npm，然后运行吗？

搜索资料后，我意识到，有远比这优雅的方法。

我找到的方法有两种：

1.部署在tomcat中，不过因为tomcat依赖java环境，所以配置可能复杂一些。

2.部署在nginx中。

最终我衡量之下选择后者，因为项目本身使用了nginx。

2.nginx配置

我完全没接触过nginx，通过数十分钟的学习大概了解到，nginx大概是个服务器，并且可以做一些所谓的“反向代理”工作，我的理解就是可以将域名映射到部署的服务（程序）中。

server {
        listen       443 ssl;
        server_name  www.yuming.com;

        ssl_certificate      /usr/local/nginx/conf/httpsCertificate/xx.xxx.xxxx.pem;
        ssl_certificate_key  /usr/local/nginx/conf/httpsCertificate/xx.xxx.xxxx.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        rewrite  ^/$ https://www.yuming.com/login redirect;

        location / {
                proxy_intercept_errors on;
                proxy_pass http://127.0.0.1:9999;
                proxy_set_header   Host             $host:$server_port;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }

    }
server {
        listen          8080;
        server_name     www.yuming.com;

        location / {
                alias /home/xxx/xxx/dist/;
                index index.html;
        }
}

上面主要有两个server配置，为了避免争议，我将域名和文件名做了处理。nginx.conf中配置了两个服务（在http{}中）。我们主要看第二个。网上搜一下就大概能明白，这个配置，我如果访问www.yuming.com:8080,那么就可以访问到服务器中的/home/xxx/xxx/dist/index.html资源。

虽然易懂，但还是有很多坑

1.端口号，服务器需要放行端口，一开始我不知道服务器需要配置，一直无法访问。

2.alias 参数 结尾需要加/ ，这里也可写作root。

3.nginx需要对访问的资源具有权限（这是很多报403的原因）

所以 开端口 加/ 加权限 解决

3.Linux 命令

说实话，不常用linux，命令真的不太记得住

修改文件权限

sudo chmod index.html 777 

 将文件从本地传输至服务器 其中 -r代表文件夹 -P是端口，注意P要大写

scp -r -P 8000 /Users/xxxx/xxxx/dist [email protected]:/home/xxx/xxx

快速查看文件信息

ll

vim指令

i插入 开始编辑

按下esc

：q！强制退出不保存
：w！强制保存
：wq！强制保存退出

4.跨域问题

终于将服务部署完成并且运行成功后，前端忽然报错了，页面按钮请求均无反应，前端跟我说可能是跨域问题，于是我又开始寻求答案。原来，只要是跨域名，跨端口，跨协议，都是跨域。

解决这个问题我其实只花了一行代码

在需要调用的controller类上加上了一个注解：

@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")

ok大功告成

---

其实在这个过程中我感受到最大的一点就是：知识太缺乏了。要是熟练掌握nginx配置、正则表达式、linux命令、maven项目的编译运行……

其实配置很简单！！

虽然我最终成功配置，但是深深感受到了自己的“无知”，真是惭愧。

希望有一天能够不再现学现用，虽然我觉得解决问题的能力同样重要，但起码不要从头开始现学现用。