前后端分离之前端静态页部署

配置Nginx, FTP并部署vue代码

第一步：在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo

vim /etc/yum.repos.d/nginx.repo

//创建内容
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

保存以后会在/etc/yum.repos.d/中创建nginx.repo文件

第二步：安装Nginx

yum install nginx -y

-y 表示全部yes通过

第三步：Nginx的命令以及配置文件位置

systemctl (start|stop|restart|status) nginx.service  #Nginx 启动|停止|重启|状态
vim /etc/nginx/nginx.conf # Nginx配置文件位置
chkconfig nginx on    #设为开机启动

第四步：设置防火墙

//设置80端口白名单
iptables -I INPUT 5 -i eth0 -p tcp --dport 80 -m state --state NEW,ESTABLISHED -j ACCEPT
//保存
service iptables save
//重启防火墙
service iptables restart

第五步：配置Nginx文件

• 1、编辑/etc/nginx/nginx.conf

  //在nginx.conf中，有一行代码，代表它去加载文件夹/conf.d/中的所有.conf文件
  include /etc/nginx/conf.d/*.conf;

• 2、编辑/etc/nginx/conf.d文件

  vim /etc/nginx/conf.d

  server {
  listen 80;
  server_name localhost;

     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;
  
     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
     }
     ....
  

  }

• 3、一台主机上适应多个服务器

  http {
  ....
    server {
            listen       80;
            server_name  www.a.com;
            charset utf-8;
            access_log  /home/a.com.access.log  main;
            location / {
                proxy_pass http://127.0.0.1:80;
            }
        }
    
     server {
            listen       80;
            server_name  www.b.com;
            charset utf-8;
            access_log  /home/b.com.access.log  main;
            location / {
                proxy_pass http://127.0.0.1:81;
            }
        }
  

  ...

第六步：安装vsftpd

yum install -y vsftpd

安装完成后，编辑vsftpd的配置文件

vim /etc/vsftpd/vsftpd.conf

把
anonymous_enable=YES
改为
anonymous_enable=NO

chroot_local_user=YES
去掉前面的注释
chroot_list_file=/data/www

启动vsftpd

systemctl start vsftpd.service

设置vsftpd开机启动

chkconfig vsftpd on

建立ftp账户

useradd -d /data/www test  #增加用户test，并制定test用户的主目录为/data/www  

passwd test #为test用户设置密码  

更改用户相应的权限设置

usermod -s /sbin/nologin test   #限定用户test不能telnet，只能ftp  

usermod -s /bin/bash test   #用户test恢复正常  

usermod -d /data/www test      #更改用户test的主目录为/test 

/bin/bash 是根目录

/home/test 是自己配置的主目录

启动／重新启动ftp

systemctl restart vsftpd.service

到这里,可以通过FTP客户端可以正常使用该用户名登录,但是没有权限修改文件,这时候需要修改一下用户权限.

设置账户权限

chmod a-w /data/www
chown -R test:ftp /data/www

如果要删除用户

在root用户下：
userdel -r test  
在普通用户下：
sudo userdel -r test

因为需要彻底删除用户，所以加上-r的选项，在删除用户的同时一起把这个用户的宿主目录和邮件目录删除。

第七步：部署Vue项目到Nginx

#进入本地的vue项目执行命令：
npm run build

然后通过FTP上传到Nginx 的/usr/share/nginx/html目录之下，就可以通过服务器直接访问了

服务器ip是直接指向/usr/share/nginx/html的