WSL中利用Nginx部署Angular

发表于 | 分类于 | | 浏览 次

Win10中启用WSL

WSL是微软和Canonical合作为开发人员提供的一个运行在win10环境下的一个Linux子系统，由微软编写核心代码，并由Canonical提供软件包的支持。
要想使用WSL很简单，在“启用或关闭Windows功能”中找到“适用于Linux的Windows子系统（Bate）”，打开它，然后按照提示在系统设置里打开开发者模式即会自动安装完成。
重启后打开CMD或者Windows Shell，输入bash，按照提示操作，接下来的换源，下载常用软件等不赘述。

WSL中安装Nginx

本质上和在Ubuntu中进行安装并没有差别，命令如下

1
sudo apt-get install nginx

等待安装完成后输入以下命令验证安装

1
sudo service nginx status

只要能找到service，无论是否在运行就说明安装成功了，如果没有运行的话，可能是别的容器占用了80端口导致nginx启动失败。需要注意的是WSL不像虚拟机存在一个单独的环境，它的所以端口都是和win10共用。
如果服务没有运行，则关闭占用端口的程序后输入以下命令启动服务，打开浏览器输入localhost即可看到nginx的欢迎页面

1
sudo service nginx start

配置nginx部署Angular

接下来把编译后的Angular应用复制到子系统中，物理机的磁盘被默认挂载在子系统的/mnt目录下，假设我们编译后的文件放在D:\dist,那么复制命令如下

1
2
3
sudo cp /mnt/d/dist /var/www -r
cd /var/www
ls

后两条命令是为了检查是否复制成功
接下来开始配置nginx,默认网站配置文件在/etc/mginx/sites-enabled/default,如果不在的话可以先找到nginx.conf,然后查看配置文件位置，或者直接在http配置里面写配置也是可以的

1
sudo vim /etc/mginx/sites-enabled/default

上面命令打开的是欢迎页的配置文件，把root替换成自己的网站路径，404页面配置成首页，保存后重载nginx即可在浏览器里看到效果

1
sudo service reload

配置nginx反向代理

nginx的反向代理功能可以说是非常有名了，很多公司选择nginx专门提供反向代理和负载均衡服务，而且和在IIS中部署一样，我们需要将我们的数据请求反向代理带后端的数据接口
完整配置文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
	listen 80 default_server;
	listen [::]:80 default_server;
	root /var/www/dist;
	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;
    # 反向代理配置，代理数据请求到数据接口
	server_name _;
	  location /api/ {
        	  proxy_pass http://localhost:8090;
	          proxy_set_header Host               $host;
        	  proxy_set_header X-Real-IP          $remote_addr;
        	  proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        	  proxy_set_header X-Forwarded-Proto  $scheme;
 	 }
    # 404配置，刷新页面时跳转首页
	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri /index.html =404;
	}

配置完成后重载nginx即可

1
sudo service reload

至此，WSL中部署Angular折腾完成。