接着昨天的进度，继续梳理思路。运维工作对我而言是陌生领域，涉及太多的配置工作，除了按手册进行配置，还要把每个配置的意义搞清楚，如果做不到了然于胸，运维就要冒很大风险，不知道哪里埋的坑将来会突然蹦出来，到时候就更难解决。所以每天梳理进度时，发现如果按探明的路线来走，也就几分钟的事情，但探索出这条路却要走很多弯路。
昨天已经完成了django的uwsgi托管，今天是探索vue的nginx托管。这其中会涉及一些ubuntu的常用指令、全局变量配置、nginx服务器的配置、nodejs的安装和配置、FTP服务器的安装和配置、nginx反向代理的实现。
昨天安装了nginx，今天重启电脑后发现nginx已经默认随系统启动，由于需要修改nginx的端口分配，修改后重启nginx才能生效，想到的最粗暴方式就是查看nginx当前占用的端口进程，sudo lsof -i:9999，这个9999端口是我昨天配置的，查出来占用这个端口的进程PID，通过sudo kill -9 PID杀掉。这里有两个需要注意的地方，lsof查看端口进程时，由于nginx是随系统启动的守护进程，需要在root权限下才可查看到，当前用户权限是查不出结果的。第二个需要记住的就是这个kill指令，以后应该会常用。kill指令不加-9参数时，默认是-15，属于正常关闭，被通知关闭的进程会自行做一些善后处理；但对于系统的后台进程、守护进程，这样的柔性关闭是会被忽略的，通过添加-9参数，可以强制关闭，被关闭的进程没有善后余地，类似于windows任务管理器中的结束进程。当然，除了这么粗暴的方式，肯定有更优雅的方式。nigix程序接受以下四种常用参数。不附加任何参数，则是启动服务器。
sudo nginx -s reload #重启
sudo nginx -s stop #关停
sudo nginx -t #测试配置文件语法
sudo nginx -v #查看nginx版本号
安装vue需要先安装npm，安装npm需要先安装nodejs，npm是nodejs的package manager，类似于ubuntu的apt、python的pip，这些都是好东西啊。通过apt安装的nodejs版本比较低，若想通过apt安装高版本的nodejs，需要手工修改apt源，很划不来的感觉。那就直接到nodejs的官网下载最新的LST版本。为什么对nodejs版本有要求呢？因为10.0之前的版本都没有自带npm，安装nodejs后还需要手工再安装配置npm，10.0之后的版本都自带了npm。打开下载页https://nodejs.org/en，网站自动检测到我的操作系统型号，直接推给我适合的程序包。下载解压后，将文件夹移动到/usr/local/node目录下，因为既要移动又要修改文件夹名，ubuntu的图形化操作不如windows方便，那就用终端的mv指令吧，在下载目录中右击打开终端，sudo mv nodejs14.x.x /usr/local/node，移动和改名一次性完成。接下来的问题是如何让这个node可以被全局调用呢？跟windows一样，需要配置环境变量。我们只需要配置用户环境变量就可以，没必要配置系统环境变量。用户环境变量在~/.bashrc文件中，波浪线~表示用户目录，相当于windows系统里的my document，在终端中输入echo ~可以看到是/home/xx。关于这个波浪线，得补充一句，这个只是bash shell（也就是现在用的这个终端）简写用户目录的符号，在其他配置文件中可不能使用，比如在nginx配置文件中，如果使用这个波浪线来指定网站目录，nginx不能理解，这也是理所当然的，nginx发布的网站总不能因为登录用户的不同而改变网站目录吧。回到配置环境变量，打开~/.bashrc，这是个只读文件，需要动用root权限，那就在终端中sudo gedit ~/.bashrc，输入密码，以可编辑方式打开了。在文末添加如下两句：
export NODE=/usr/local/node
export PATH=$NODE/bin:$PATH
保存后，在终端中输入source ~/.bashrc，加载修改后的环境变量。你可以在终端中输入echo $PATH看一下输出结果，是不是node的bin地址已经被加载到环境变量中了。注意是大写字母PATH，大小写敏感。其实我们打开/usr/local/node/bin目录看一下，里面有node程序文件，还有指向npm的link，所以配置了这个bin目录到环境变量，就可以到处npm了，爽不爽？还不是很爽，因为npm用的是境外源，跨海光纤加GFW（长城防火墙）速度很慢连接也不稳定。那就换用国内的呗，国内的叫cnpm，npm此生唯一用途就是来装一个自己的替代品npm install -g cnpm。怕慢，那就在后面再加个参数，--registry=https://registry.npm.taoboa.org，这个是淘宝源，速度如飞。这里稍微展开一下npm的几个参数，-g是全局安装的意思，其不在具体项目的node_modules目录中保存模块，模块依赖关系也不写入项目的package.json中的dependencies属性中。当换成--save开关参数时，模块会安装在项目的node_modules目录中，且会在dependencies中添加依赖关系，将来build项目时，会与项目一同打包发布。还有一种是--save-dev开关参数，因为有些依赖包仅仅在开发时会使用，比如gulp用于压缩css、js模块，正式部署时不需要，通过这个开关参数安装的包会出现在项目的node_modules目录中，但不会添加项目依赖项，在npm install -production时不会打包到发布文件中。记住一个原则就很简单，项目发布后要用的包，用--save，仅项目开发过程中需要用的包，用--save-dev，不是某个项目使用，而是全局调用的（如脚手架工具），那就-g。
有了cnpm，一切就变得容易。首先安装vue的脚手架工具cnmp install -g vue-cli，为什么cnpm也能全局使用呢？好奇的你可以打开/usr/local/node/bin目录看一下，是不是cnpm的link赫然在列，惊不惊喜意不意外。当然这个脚手架也需要全局使用，所以也是-g开关。安装好了vue-cli，再到刚才那个目录看一下，是不是又惊喜地发现指向vue的link也在安装脚手架时自动创建好了，这意味着vue也可以全局调用了。谁说linux不人性化，越用越觉得体贴。在终端里大胆地输入vue -V，可以看到vue的版本号了吧，不仅要大胆，V还要记得大写。
切换到想要创建vue项目的目录，终端里输入vue init webpack vuetest，vue脚手架工具帮我们自动创建了一个叫vuetest的初始项目目录结构，cd进入vuetest，cnpm install，安装项目以来的模块，这个helloword项目就可以测试运行。输入npm run dev，通过浏览器访问localhost:8080就可以看到vue的欢迎页。如果想通过IP地址访问，需要修改config/index.js文件中的host:"0.0.0.0"，重新npm run dev，试试IP地址访问。
unbunt中安装免费的webstrom需要申请学生或者教师许可（其他方法我真的不懂），那就用微软的vscode吧，配合vuter插件对vue开发也很友好。vscode在ubuntu的程序商店中就有，免费的，安装也很快。安装好后，打开刚才那个vuetest目录，作为一个vscode项目，点击左侧Extension按钮，搜索Vuter，安装这个插件，vue的语法就能被vscode识别和智能补齐了。当然，和webstrom一样，vscode也可以在底部调试窗口旁边打开一个terminal终端，很多工作在这个终端中一样完成，没必要劳师动众打开系统终端了。
vue能使用npm运行了，那怎么托管到nginx上呢？在vscode刚才介绍的那个terminal中，输入npm run build，npm就开始对vue项目进行打包发布，发布后的文件在dist文件夹中（这里用npm和cnpm是一样的，因为不需要用网络去下载模块）。接下来只需要修改nginx配置文件，将这个dist目录作为网站目录即可。
nginx的配置文件在/etc/nginx/目录下，主配置文件叫nginx.conf，这个文件会加载sites-enabled目录下的default配置文件。管理端口、代理转发、虚拟目录等都是在这个default文件中配置。内容如下，其中有几点一解释就很清楚明了。首先要理解一点，同一个端口，可以开多个server，通过域名来定向server。比如我申请了www.a.com，www.b.com，www.c.com三个域名，都指向我服务器的IP:80端口，而不同的域名将会处理不同的业务，就可以通过配置文件中的server_name进行区分。但偏偏有人不通过域名，而通过ip地址或者其他还未绑定业务的域名（域名指向了我的IP，但我还没为这个域名配置server），那所有这类访问会被nginx泛解析，如果不配置default_server，则会用第一个server处理这类请求。当然，如果存在多个类似default这样的配置文件时，运维可能也搞不清楚到底哪个server会被第一个加载，这时就可以通过添加default_server这个参数来指定处理这类泛解析的请求，
如下面第一个server，显式指定了default_server。有人看到[::]:80这个可能会有疑问，这个是IPv6的表示而已。这第一个server配置的server_name为_，只是表示与业务域名无关的名字，随便取一个，大家都用_那就用_，没有什么神秘之处。
第二个server，同样监听80端口，但server_name就是IP地址了，所以只有通过IP地址的方式访问80端口，才会打开配置在这个server上的网站（根目录设置为vue刚才生成的dist目录，这样vue就发布到nginx上了）。location参数里写了三个：try_files $uri $uri/=404，这表示首先以文件形式处理请求，如果不存在这个文件，则以url的方式处理，如果url也解析不到，那就返回404页面。
第三个server就是昨天日志里所说的多做的一半无用功，用nginx代理转发8080端口的请求到uwsgi所在的8888端口。其实配置vue的ajax跨域代理转发跟这个方法类似，都是在location中添加映射，只不过是对vue所在server下的某个alias进行端口映射，具体以后再说。补充一点，如果这里开启了这个代理转发，那uwsgi配置文件中就不能用http监听，而应该改为socket监听，否则浏览器访问8080端口时会出现gateway错误。
今天最后还配置了ubuntu的vsftpd，方便与windows下的开发环境同步项目。跨过下面这段配置文件再看。
server{
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
return 403;
}
server{
listen 80;
server_name 192.168.31.111;
root /home/wu/VSCodeProjects/vuetest/dist;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
server{
listen 8080;
server_name 127.0.0.1;
charset UTF-8;
access_log /var/log/nginx/django_access.log;
error_log /var/log/nginx/django_error.log;
client_max_body_size 75M;
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:8888;
uwsgi_read_timeout 2;
}
location /static {
expires 30d;
autoindex on;
add_header Cache-Control private;
alias /home/wu/PycharmProjects/testweb/static;
}
}
linux下的ftp服务器软件vsftpd算比较常见，此外还有proftpd+gadmin-proftpd的组合套件，可以图形化的配置ftp，但这么小的一个东西，没必要搞组合套件，直接vsftpd吧。
sudo apt install vsftpd，安装好后打开它的配置文件，又要摸索一番配置方法。配置文件在/etc/vsftpd.config中。是不是经常看到etc这个目录，etc就是英文其他的缩写，Unix时代本来是用来存放一些杂七杂八的其他的东西，现在发展为存放各种配置文件。因为这个ftp是给开发使用，不需要配置匿名用户，也不需要配置其他用户，直接用可以登录ubuntu系统的本地用户就可以。所以在配置文件第一行就将匿名用户关闭。其他都有详细注释，一看就懂，唯一是加粗倾斜的三个参数需要解释一下：allow_writeable_chroot、chroot_list_enable、chroot_list_file。
allow_writeabl_chroot=YES时，将用户在ftp登录时的根路径锁定到用户在ubuntu中的~目录（还记得波浪线~的意思不，回第一段复习）。这样可以避免ftp能操作到ubuntu系统的root目录。后面两个参数时配合这个参数一起使用的，chroot_list_enable表示是否有例外的用户，比如ubuntu有好几个用户，其中有一个超级用户需要通过ftp访问到~目录以上的目录，那就可以给他配置一个例外，将chroot_list_enable=YES，nginx就会加载chroot_list_file指定的文件，这个文件中写上这个超级用户的用户名就可以了。如果chroot_list_enable=YES开启后，chroot_list_file指定的文件并不存在，那nginx会在启动时就报错无法启动。既然是例外，那聪明的小伙伴可能已经想到，如果allow_writeabl_chroot=NO，即不把用户限制到~目录，所有用户都能通过ftp访问到~以上的所有目录，那这个例外是不是又指其他意思了。对的，其实就是一个取反的作用，所有人都有权限时，可以通过这个chroot_list_enable=YES，加载chroot_list_file，这个file中指定的用户就只能访问~以下的目录。细品就能理解了。
anonymous_enable=NO #接受匿名用户
local_enable=YES #接受本地用户
write_enable=YES
local_umask=022 #本地用户上传文件的umask（umask是文件权限，022是最高权限）
xferlog_enable=YES #使用上传/下载日志,日志文件默认为/var/log/vsftpd.log,可以通过xferlog_file选项修改
xferlog_std_format=YES #日志使用标准xferlog格式
ftpd_banner=Welcome to my FTP. #login时的欢迎信息
#local_root=/home/wu #本地用户login后所在目录,若没有设置此项,则本地用户login后将在他的home目录中
chroot_local_user=YES #用户被限制home目录
allow_writeable_chroot=YES #vsftpd增强了安全检查，用户被限定在主目录，则默认主目录不能具有写权限.如果检查发现还有写权限，就会报错误,。
chroot_list_enable=NO #chroot_list_file生效,且存放限制home目录访问的用户（为空会报错）
#chroot_list_file=/etc/vsftpd/chroot_list #若设置为YES则记录在userlist_file选项指定文件(默认是/etc/vsftpd.user_list)中的用户将无法login,并且将检察下面的userlist_deny选项
listen=YES #服务器以standalong模式运行,这样可以进行下面的控制
local_max_rate=512000 #本地用户的传输比率(b/s)
max_clients=100 #可接受的最大client数目
max_per_ip=10 #每个ip的最大client数目
connect_from_port_20=YES
tcp_wrappers=YES
pam_service_name=vsftpd
