记一次前后端分离项目阿里云服务器部署

201 阅读2分钟

本项目根据B站up主 全栈之巅教程所写,教程很好,欢迎大家前去学习,三连。


一、服务器同步本地代码

1. 在服务器中的某个位置(我是在/root/data)文件夹中通过git将仓库代码拉取至服务器。项目中前端、后台管理、服务端代码都在一个文件下,目录结构如下:

  • 其中admin是后台管理项目的代码所在
  • web是前端项目所在

我们接下来就要启动server根目录下的index.js启动服务端

2. 安装pm2启动服务端(pm2的好处就是启动服务端不会占用终端,后台运行进程)

//全局安装
npm i -g pm2

进入服务器server目录中,通过pm2执行根目录下的index.js

//启动index.js
pm2 start index.js
//保存当前已启动的服务
pm2 save
//执行开机自启配置
pm2 startup
执行`pm2 startup`会出现一下提示 设置环境变量:
[PM2] Init System found: upstart
[PM2] To setup the Startup Script, copy/paste the following command:
sudo env PATH=$PATH:/opt/bitnami/nodejs/bin /opt/bitnami/nodejs/lib/node_modules/pm2/bin/pm2 startup upstart -u bitnami --hp /home/bitnami
只需要复制sudo env...这一部分命令执行即可。

设置启动之后,sudo reboot 重启服务器,通过pm2 list命令查看验证,index即为当前启动进程

二、配置Nginx

1. 如上步骤后,服务端已经启动,接下来就是部署前端和后台管理项目;因为在项目代码中配置了静态托管webadmin中打包后的代码所有将项目启动后,根路径直接访问web前端项目,在路径中加入/admin则会访问后台管理项目

2. 因为项目中配置的是3000端口,而Nginx默认的是80端口,所有配置反向代理,当输入网址后从80端口代理到3000端口,nginx.conf配置如下:

#user  root;     //这里需要注意,user一定要为当前登录服务器的用户名
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
   worker_connections  1024;
}


http {
   include       mime.types;
   default_type  application/octet-stream;

   #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
   #                  '$status $body_bytes_sent "$http_referer" '
   #                  '"$http_user_agent" "$http_x_forwarded_for"';

   #access_log  logs/access.log  main;

   sendfile        on;
   #tcp_nopush     on;

   #keepalive_timeout  0;
   keepalive_timeout  65;

   #gzip  on;

   server {
       listen       80;    //nginx 默认端口
       server_name  localhost;

       #charset koi8-r;

       #access_log  logs/host.access.log  main;

       location / {
           root   /root/data/moba/server/web;  // 配置前端项目即可
           index  index.html index.htm;
           proxy_pass http://127.0.0.1:3000;	// 添加如下代码,反向代理到3000端口
       }

       #error_page  404              /404.html;

       # redirect server error pages to the static page /50x.html
       #
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }

       # proxy the PHP scripts to Apache listening on 127.0.0.1:80
       #
       #location ~ \.php$ {
       #    proxy_pass   http://127.0.0.1;
       #}

       # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
       #
       #location ~ \.php$ {
       #    root           html;
       #    fastcgi_pass   127.0.0.1:9000;
       #    fastcgi_index  index.php;
       #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
       #    include        fastcgi_params;
       #}

       # deny access to .htaccess files, if Apache's document root
       # concurs with nginx's one
       #
       #location ~ /\.ht {
       #    deny  all;
       #}
   }


   # another virtual host using mix of IP-, name-, and port-based configuration
   #
   #server {
   #    listen       8000;
   #    listen       somename:8080;
   #    server_name  somename  alias  another.alias;

   #    location / {
   #        root   html;
   #        index  index.html index.htm;
   #    }
   #}


   # HTTPS server
   #
   #server {
   #    listen       443 ssl;
   #    server_name  localhost;

   #    ssl_certificate      cert.pem;
   #    ssl_certificate_key  cert.key;

   #    ssl_session_cache    shared:SSL:1m;
   #    ssl_session_timeout  5m;

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

   #    location / {
   #        root   html;
   #        index  index.html index.htm;
   #    }
   #}

}

3. 返回上级nginx目录中,进入sbin目录,检查nginx.conf配置是否有问题,重启nginx

    //在sbin目录下执行如下命令检查配置有没有问题
    ./nginx -t
   //出现如下提示 则没有问题可以重启
   nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
   nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
   //执行如下命令重启nginx
   ./nginx -s reload

三、部署过程中遇到的一些问题

  • 在配置nginx.conf之后,输入服务器公网ip还是出现404问题:

    权限不够 将nginx.config 中的root 指向的目录添加权限:例如 chmod -R 777 /data chmod -R 777 /data/www/

四、 总结

跟着up主的教程,第一次完成前后端项目的从0到1,再到服务器部署,前后花了将近一个多月的时间,一开始对数据库操作,接口编写一窍不通,通过这段时间的学习受益匪浅,收获满满,继续努力,第一次写掘金文章,很多写的不好的地方请大佬们指正,谢谢!