服务器使用的是阿里云学生机,这次选择的是轻量应用服务器,也就是预装了一些配置的ecs服务器,简化操作,不用为配置整那么长时间。
在控制台设置一下root密码就直接putty连接了,安装node的安装包解压配置,搭建node环境。
后端代码的上传
FZ上传代码到workspace文件夹(随意一个可访问到的文件夹)
这边部署的时候才知道npm i –save这个后面参数的作用,是把需要安装的包信息写在package.json这个文件夹里。因为你在本地写的代码在本地的环境,当部署到线上的时候线上是没有这个环境的(也就是不知道你需要安装什么依赖),只有把本地安装的东西都写在package.json这个文件里,之后在线上服务器环境下直接npm i 就会安装package.json里的依赖
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分
devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
devDependencies下列出的模块,是我们开发时用的依赖项,像一些进行单元测试之类的包,比如grunt-contrib-uglify,我们用它混淆js文件,它们不会被部署到生产环境。dependencies下的模块,则是我们生产环境中需要的依赖,即正常运行该包时所需要的依赖项。
还有mongodb的配置和连接。。。
mongodb需要在官网下载安装包传到linux服务器上,注意对应版本,上传到root目录下,上传完之后解压缩,把解压出来的东西放在一个自己新建的文件夹mongodb中,里面再创建etc、data、logs三个文件夹,etc里新建配置文件mongo.conf信息,logs里新建mongo.log文件,在conf文件里写如下代码:
dbpath=/root/mongodb/data //数据文件存放的绝对路径
logpath=/root/mongodb/logs/mongo.log//日志文件存放的绝对路径
logappend=true
journal=true
quiet=true
port=27017
frok=true //这个是为了使进程以守护进程的方式运行,防止断线,不稳定
然后在解压后的文件bin目录下执行如下代码
./mongod -f /root/mongodb/etc/mongo.conf
会出现如下信息(正在创建子进程,已创建成功父进程可以继续执行的意思)
about to fork child process, waiting until server is ready for connections.
forked process: 13174
child process started successfully, parent exiting
然后要想在所有目录下都可以执行mongo这个指令就需要把它添加到usr/local/bin目录下
ln -s /root/mongodb/mongodb-linux-x86_64-rhel70-3.6.5/bin/mongo /usr/local/bin/mongo
ln -s /root/mongodb/mongodb-linux-x86_64-rhel70-3.6.5/bin/mongod /usr/local/bin/mongod
执行mongod -f /root/mongodb/etc/mongo.conf 开启mongo服务,然后再开一个命令行session执行mongo命令进入数据库操作
这里我的项目需要一个travel数据库,于是就use travel创建了这个数据库,注意还需要往里面任意传一个数据,不然退出这个数据库就没了,使用db.insert这个方法。(这边为了安全性还得设置一个账号密码,不然很数据库可以被别人直接远程登录。。。mongodb的安全性必须重视,或者不设置账号密码,在conf文件中加bind_ip = 127.0.0.1 ,只允许本机ip访问,就没有问题啦)
之后之前上传的后端代码就可以运行了(跟本地一样,node bin/www)!是不是非常的神奇,后端代码的部署非常简单。但是还是要用pm2让它到后台运行,不然会占用命令行。
先全局安装pm2,之后pm2 start bin/www即可,我这边遇到问题说pm2命令未找到是因为软连接的问题,需要手动配置一下它的环境变量,ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/pm2即可。
常用命令:pm2 restart,pm2 list(查看所有后台进程),stop,stop all,……
pm2 log这个命令可以查看日志,mongodb连接状态的日志,进行线上调试比较有用。
这边照理来说就可以直接服务器ip加端口号访问到了,但是却不可以,整了半天发现在阿里云控制台需要加安全组规则,把3000这个端口暴露出来才能访问!!
前端代码的上传
前端这边,需要在本地先npm run build生成生产包,生成dist文件夹上传到服务器。
有两个方法,一个是全部传到后端文件夹里,后端暴露文件端口出来供大家访问,但是这样url里就会有端口名,访问不方便。而且不是前后端分离。这种方法优点是部署简单,本地一打包,传上去就完事,但是在本地的图片链接要把localhost改成服务器的ip或域名,这样才能正常显示。
还有就是部署到Nginx服务器中,直接输ip或域名就能访问,也是主流的方法。
nginx的配置网上随便一篇教程就可以,我看的是这篇https://www.linuxidc.com/Linux/2016-09/134907.htm ,配置好了之后进入nginx的根目录/usr/local/nginx/html,将前端代码传进去,就可以直接通过域名/ip访问到了,但是后端接口是访问不到的,因为跨域的问题,前端这的端口是80,后端端口是3000,需要在nginx里设置代理(这个代理类似于自己开发的时候webpack的配置文件里的代理),也就是访问80端口的请求时转到访问3000端口,转发解决跨域问题。
nginx的根目录/usr/local/nginx/下有conf文件夹,里面有nginx.conf配置文件,基本上配置都在这里面改,等域名买了之后还需要在这里面设置一下域名。改里面的server项:
server {
listen 80;
server_name localhost;//域名写在这里
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /users/{
proxy_pass http://127.0.0.1:3000/users/;
}
location /articles/{
proxy_pass http://127.0.0.1:3000/articles/;
}
}
这里很坑的是/这个符号,忘记加在最后导致代理没用,找了半天bug。。。。一定要细心。
当拿到域名之后server里的location / 其实都不用动。。。直接就可以访问了,但是我改动了一下访问图片的路径,原来是根据ip访问到后端文件夹,现在可以设置一下路由转发,根据域名访问(主要就是前段代码里面不暴露域名,好看点),在上面的location下加一个:
location ~ .*\.(gif|jpg|jpeg|png)$ {
proxy_pass http://127.0.0.1:3000;
}
表示所有指向图片的路径都转发到127.0.0.1:3000这个端口下,比如访问collegetravel.cn/111.jpg会自动转发到127.0.0.1:3000/111.jpg
再重启一下nginx:
cd /usr/local/nginx/sbin/,
./nginx -s reload
这样就可以通过域名/ip的形式直接访问到网站啦哈哈哈哈哈哈哈,完结撒花~
好像还有图片的跨域问题。。代码里是直接暴露3000端口供前端访问的,可以考虑跨域转发,前端不使用:3000这种方式,直接ip+图片名,nginx里跨域转发一下即可